Question

我正在尝试使用boostrap导航栏构建标题菜单。目前我有我的导航栏，滚动时我添加了navbar-fixed-top类，导航栏覆盖了页面的整个宽度，一切都很好。

现在我想在宽度上添加动画为we can see here

我尝试在navbar-fixed-top类上添加css过渡效果，但没有任何变化。我的HTML结构：

 <div class="row">
    <div class="col-md-8 col-md-offset-2">
        <nav class="navbar navbar-default">
            <div class="container">
                ....
            </div><!-- /.container-fluid -->
        </nav>
    </div>
</div>

我的CSS代码：

.navfixed{
  position: fixed;
  top:0;
}

和我的JQuery：

var offset = $(".navbar").offset().top;
$(document).scroll(function(){
    var scrollTop = $(document).scrollTop();
    if(scrollTop > offset){
        $(".navbar").addClass("navbar-fixed-top");


    }
    else {
       $(".navbar").removeClass("navbar-fixed-top");
    }
});

如果你有想法。

非常感谢

Answer 1

使用

var scrollTop = $(window).scrollTop();

而不是

var scrollTop = $(document).scrollTop();

或者您也可以使用

var scrollTop = $(this).scrollTop();

请参阅此处的完整代码：

var offset = $(".navbar").offset().top;
$(document).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop > offset){
        $(".navbar").addClass("navbar-fixed-top");


    }
    else {
       $(".navbar").removeClass("navbar-fixed-top");
    }
});

这可能会有所帮助。

引导导航栏宽度

1 个答案: