Bootstrap-滚动时粘性/固定导航条

Bootstrap - sticky/fixed navbar when scroll

本文关键字：导航 滚动 Bootstrap-      更新时间：2024-01-15

我想创建一个像这样的导航栏：http://bartiistudio.tk/noxilie/onepage/index.html

嗯，我使用stickUp jQuery脚本，但我的导航栏不能很好地工作。我不知道怎么修。

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

粘贴代码：

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

如果所有的问题都是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

相关文章：