Sayfamızdaki (genelde navigation bar olarak tanımlanır) üst menüyü, sayfa aşağı doğru hareket ettiğinde yukarıya sabitlemek JQuery ile oldukça kolay. Buradaki çözüm sayfa scroll edildiğinde, en üst kısmın scroll çubuğuna kaç pixel uzaklıkta olduğunun kontrolüne dayanır. Belirli bir yükseklik aşıldığında menü çubuğunun stilindeki “position” “fixed” olarak ayarlanıyor, “top” değeri ise “0″ yapılıyor. z-index:1000 olarak atanmasının nedeni, tüm elementlerden üstte görünmesi içindir.
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
$(document).ready(function () {
$(window).on('scroll', function () {
var scrolltop = $(this).scrollTop();
if (scrolltop >= 200) {
$('.navbar').css("position", "fixed");
$('.navbar').css("top", "0");
$('.navbar').css("z-index", "1000");
}
else {
$('.navbar').removeAttr('style');
}
});
});