引导导航栏宽度上的动画

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");
    }
});

这可能会有所帮助。