引导程序 3 导航栏无法正确转换

Question

我一直在使用引导程序 3，并试图创建一个导航栏，在滚动到我的 html 的初始标题部分后从顶部过渡。我快到了。 我使用"词缀"在滚动后成功添加导航栏，并且在过渡方面也取得了一些成功。但是我仍然有 2 个（我希望是小）问题。

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

2）过渡没有正确过渡，它只是弹出而不是动画。

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

谁能告诉我哪里出错了？

任何帮助将不胜感激，

谢谢！

Answer 1

演示

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 */
}