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

Bootstrap - 滚动时粘滞/固定导航栏

1 个答案: