关于该主题的引导文件对我来说有点混乱。 我想要实现类似的行为，就像在文件中使用affix navbar：导航栏位于一个段落/页面标题下方，并且在向下滚动后，首先要滚动到达页面顶部，然后再固定下来进一步的向下滚动。
由于jsFiddle不符合导航栏概念，我已经设置了一个单独的页面，作为一个最小的例子： http : //i08fs1.ira.uka.de/~s_drr/navbar.html
我使用这个作为我的导航栏：
<div class="navbar affix-top" data-spy="affix" data-offset-top="50"> <div class="navbar-inner"> <div class="container"> <div class="span12"> <a class="brand" href="#">My Brand</a> This is my navbar. </div> </div> <!-- container --> </div> <!-- navbar-inner --> </div> <!-- navbar -->我想我想要data-offset-top值为0（因为该栏应该“坚持”到最顶端“但是50有至少有一些效果可观察。
如果也把JavaScript代码放在适当位置：
<script> $(document).ready (function (){ $(".navbar").affix (); }); </script>任何帮助赞赏。
The bootstrap documentation on that topic is a little confusing to me. I want to achieve similar behaviour like in the docs with the affix navbar: The navbar is below a paragraph / page heading, and upon scrolling down it should first scroll along until reaching the top of the page, and then stick there fixed for further scrolldowns.
As jsFiddle does not work with the navbar concept, I've set up a separate page for usage as a minimal example: http://i08fs1.ira.uka.de/~s_drr/navbar.html
I use this as my navbar:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50"> <div class="navbar-inner"> <div class="container"> <div class="span12"> <a class="brand" href="#">My Brand</a> This is my navbar. </div> </div> <!-- container --> </div> <!-- navbar-inner --> </div> <!-- navbar -->I thinkg i would want data-offset-top to be of value 0 (since the bar should "stick" to the very top" but with 50 there is at least some effect watchable.
If also put the javascript code in place:
<script> $(document).ready (function (){ $(".navbar").affix (); }); </script>Any help appreciated.
最满意答案
我有一个类似的问题，我相信我找到了一个改进的解决方案。
不要在HTML中指定data-offset-top 。 而是在调用.affix()时指定它：
$('#nav').affix({ offset: { top: $('#nav').offset().top } });这里的优点是可以更改您的站点的布局，而无需更新data-offset-top属性。 由于它使用元素的实际计算位置，它还可以防止与使元素稍微不同的位置的浏览器不一致。
您仍然需要使用CSS将元素夹到顶部。 此外，我必须在nav元素上设置width: 100% ，因为.nav元素与position: fixed由于某些原因position: fixed不正当：
#nav.affix { position: fixed; top: 0px; width: 100%; }最后一件事：当固定元素变得固定时，其元素不再占用页面上的空间，导致其下面的元素“跳转”。 为了防止这个丑陋，我把导航栏包在一个div它的高度设置为在运行时等于导航栏：
<div id="nav-wrapper"> <div id="nav" class="navbar"> <!-- ... --> </div> </div>。
$('#nav-wrapper').height($("#nav").height());这是强制性的jsFiddle看到它在行动 。
I was having a similar problem, and I believe I found an improved solution.
Don't bother specifying data-offset-top in your HTML. Instead, specify it when you call .affix():
$('#nav').affix({ offset: { top: $('#nav').offset().top } });The advantage here is that you can change the layout of your site without needing to update the data-offset-top attribute. Since this uses the actual computed position of the element, it also prevents inconsistencies with browsers that render the element at a slightly different position.
You will still need to clamp the element to the top with CSS. Furthermore, I had to set width: 100% on the nav element since .nav elements with position: fixed misbehave for some reason:
#nav.affix { position: fixed; top: 0px; width: 100%; }One last thing: When an affixed element becomes fixed, its element no longer takes up space on the page, resulting in the elements below it to "jump". To prevent this ugliness, I wrap the navbar in a div whose height I set to be equal to the navbar at runtime:
<div id="nav-wrapper"> <div id="nav" class="navbar"> <!-- ... --> </div> </div>.
$('#nav-wrapper').height($("#nav").height());Here's the obligatory jsFiddle to see it in action.
更多推荐
发布评论