固定頂部導航欄的變體

Question

如何制作導航欄，該導航欄在頁面加載時位於距頂部50像素的位置？ 當我向下滾動時，它不會移動，但是當我穿過它時，其行為類似於Bootstrap中的固定頂部導航欄。 如果您使用Bootstrap，那將真的很有幫助。

預先感謝您的回答。

Answer 1

使用以下簡單的jquery腳本：

$(window).scroll(function () {
    var height = $('body').height();
    var scrollTop = $(window).scrollTop();
    if(scrollTop>50){
        $('#navbar').css({ 'position': 'fixed', 'top' : '0', 'opacity': '0.5'});
    } else {
         $('#navbar').css({ 'position': 'absolute', 'top': '50px', 'opacity': '1'});
    }
});

這是JSFiddle示例

Answer 2

這是一個構建為可與引導程序一起使用的jquery腳本，該腳本以50px滾動滾動到navbar-fixed-top中。

引導示例

$(window).scroll(function () {
    var height = $('body').height();
    var scrollTop = $(window).scrollTop();
    if(scrollTop>50){        
        $(".navbar-default").addClass("navbar-fixed-top");
    } else {
        $(".navbar-default").removeClass("navbar-fixed-top");
    }
});