Bootstrap-滾動時的粘性/固定導航欄

Question

我想創建一個像這樣的導航欄： http : //bartiistudio.tk/noxilie/onepage/index.html

好吧，我使用stickUp jQuery腳本，但是導航欄無法正常工作。 我不知道該如何解決。

這是jsfiddle： http : //jsfiddle.net/52VtD/792/

stickUp代碼：

jQuery(function($) {
        $(document).ready( function() {
         //enabling stickUp on the '.navbar-wrapper' class
         $('.navbar-wrapper').stickUp();
         });
});

Answer 1

如果您所有的問題是navbar-wrapper沒有占據整個寬度。 您只需要設置width:100% 。 stickUp將導航欄的位置從relative更改為fixed從而引起了問題。

如果您需要做的只是將導航欄放在最上面，那為什么不創建自己的腳本。

好玩又容易：D

$(document).ready( function() {
    var $stick = $('.navbar-wrapper');

    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();

        if(scrollTop >= $stick.offset().top){
            $stick.css({'position':'fixed'});
        }else{
            $stick.css({'position':'relative'});
        }
    });
});

看到這個jsfiddle