Bootstrap 3 Navbar未正确转换

Question

我一直在玩bootstrap 3，我正在尝试创建一个导航栏，在滚动到我的html的初始标题部分后从顶部过渡。我快到了。我使用'affix'在滚动后成功添加了导航栏，并且在转换时也取得了一些成功。但是我仍然有2个（我希望是次要的）问题。

1）过渡开始得太早。 （即，在导航栏进入之前，我没有完全通过我的标题）

2）转换没有正确转换，它只是快照而不是动画。

以下是我编写的代码： http://bootply.com/104811

有谁能告诉我哪里出错了？

任何帮助将不胜感激，

谢谢！

Answer 1

DEMO

1）使用标题下方的元素将偏移量应用于词缀，就像容器一样。或者只是硬编码像素数offset: { top: 100 }。

$('#nav').affix({
    offset: { top: $('#some-lower-element').offset().top }
});

2）我想我想出了这个......

如果您通过visibility: hidden和position: fixed（屏幕顶部正上方）保持导航可见（删除top: -50），则transition在向上滚动时仍可正常工作。

#nav{
    position: fixed;
    width: 100%;
    top:-50px;
    transition: top 1s;
    -webkit-transition: top 1s; /* Safari */
}