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