Muhakkak görmüşsünüzdür bir sitede ve bunun nasıl olduğunu merak ederek aramaya koyulmuş ve buraya gelmişsinizdir diye tahmin ediyoruz.
Bazı web sitelerinde sayfanın aşağılarına inerken sitenin menüsü üst kısımda hızlı ulaşmak için sabitlenir ve bu menüye ulaşmak için sayfanın yukarısına tekrar çıkmaya gerek kalamasını sağlar.
Size bu kodu sunmadan önce örneğinin nasıl çalıştığını gösterelim:
Sayfanın tam kodu aşağıdan görülebilir:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" /> <title>jQuery - Üstte Dinamik Sabit Menü</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> <script language="JavaScript" type="text/javascript"> var uzaklik = 50; // menü "div"ini üstte sabitlemeden önce üstten kaç piksel aşağı inileceğini belirtir. $(window).bind('scroll', function () { if ($(window).scrollTop() > uzaklik) { $('.menu').addClass('fixed'); } else { $('.menu').removeClass('fixed'); } }); </script> <style type="text/css"> body { margin:0px; } .menu { background:#345; color:#FFF; height:2em; padding:0em; position:absolute; top:50px; width:100%; } .fixed { position:fixed; top:0; } </style> </head> <body> <div class="menu">Menü</div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />Sayfa Sonu </body> </html> |
