jQuery 固定导航栏上的 Bootstrap scrollspy 偏移不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17879846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap scrollspy offset on a fixed navbar does not work
提问by Joshc
I have created and exact fiddle of my problem here for testing: http://jsfiddle.net/aVBUy/7/
我在此处创建并准确解决了我的问题以进行测试：http: //jsfiddle.net/aVBUy/7/
The issue is, when I click on navbar items, I have a script which scrolls to the element id. And I am using scrollspy to highlight the nav elements when page is in correct position. However the scrollspy is only changing the active state when it hits the top of the browser/device. Because my navbar is fixed I need an offset applied to scrollspy to offset by 51px (navbar height).
问题是，当我点击导航栏项目时，我有一个滚动到元素 id 的脚本。当页面处于正确位置时，我使用 scrollspy 突出显示导航元素。但是，滚动间谍仅在到达浏览器/设备顶部时才更改活动状态。因为我的导航栏是固定的，所以我需要一个应用于 scrollspy 的偏移量以偏移 51px（导航栏高度）。
I've tried everything and I can't get it to work. Please check my fiddle and see if you can find the where I'm going wrong, would help me so much.
我已经尝试了一切，但我无法让它工作。请检查我的小提琴，看看您是否能找到我出错的地方，这对我有很大帮助。
Here's my minimised code...
这是我最小化的代码...
HTML
HTML
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"><img src="img/logo.gif" alt="" /></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#welcome" data-scroll="#welcome">Welcome</a></li>
<li><a href="#about" data-scroll="#about">About</a></li>
<li><a href="#route" data-scroll="#route">The Route</a></li>
<li><a href="#bike" data-scroll="#bike">The Bike</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div id="welcome" class="row-fluid">
<div class="span12">
<h3>Welcome</h3>
...
</div>
</div>
<hr />
<div id="about" class="row-fluid">
<div class="span12">
<h3>About the ride</h3>
...
</div>
</div>
<hr />
<div id="route" class="row-fluid">
<div class="span12">
<h3>The Route</h3>
...
</div>
</div>
<hr />
<div id="bike" class="row-fluid">
<div class="span12">
<h3>The Bike</h3>
...
</div>
</div>
<hr>
<footer>
<p class="muted"><small>? 2013 All rights reserved.</small></p>
</footer>
</div>
CSS
CSS
body {
padding: 51px 0 0;
}
/* Override Bootstrap Responsive CSS fixed navbar */
@media (max-width: 979px) {
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
margin-left: 0px;
margin-right: 0px;
}
}
body > .container {
padding: 0 15px;
}
SCRIPT
脚本
var offsetHeight = 51;
$('.nav-collapse').scrollspy({
offset: offsetHeight
});
$('.navbar li a').click(function (event) {
var scrollPos = $('body > .container').find($(this).attr('href')).offset().top - offsetHeight;
$('body,html').animate({
scrollTop: scrollPos
}, 500, function () {
$(".btn-navbar").click();
});
return false;
});
FIDDLE
小提琴
回答by Schmalzy
You need to apply the offset to the body.
您需要将偏移应用于身体。
$('body').scrollspy({
offset: offsetHeight
});
Also, you will need to subtract at least one from the offsetHeight in the line below, otherwise it will not work when scrolling up.
此外，您需要从下一行的 offsetHeight 中至少减去一个，否则向上滚动时它将不起作用。
var scrollPos = $('body > .container').find($(this).attr('href')).offset().top - (offsetHeight - 1);
回答by Zoltán
You can also achieve this without javascript (via data attributes), by declaring data-offset="51"in addition to data-target.
您也可以做到这一点无javascript（通过数据属性），宣称data-offset="51"除data-target。
Source: https://getbootstrap.com/docs/3.3/javascript/#scrollspy-usage
来源：https: //getbootstrap.com/docs/3.3/javascript/#scrollspy-usage
回答by Turbojohan
With only javascript it works as simple as this:
仅使用 javascript，它的工作方式如此简单：
$( document ).ready(function() {
//Scrollspy offset
$("body").scrollspy({target: "#scroll-nav", offset:200});
});
回答by Deano
There is any easier way to do this using the attributes of the HTML tag that you wish to spyon.
使用您希望监视的 HTML 标记的属性，还有更简单的方法可以做到这一点。
<ul class="nav nav-list affix" data-spy="affix" data-offset-top="585" data-offset- bottom="425" id="prepare-navigation">
<li class="nav-header">Where?</li>
<li class="divider"></li>
<li><a href="#at-the-museum-day-time">When?</a></li>
<li class="divider"></li>
<li><a href="#at-the-museum-overnight">Why?</a></li>
</ul>
The data-offset-topand data-offset-bottomattributes can be used in conjuntion with the amount that you wish to offest by. Much easier!
该数据抵消顶和数据偏移底属性可以连词使用与您希望offest量。轻松多了！
Check out this link for a better explanation: https://stackoverflow.com/a/18326668/335567
查看此链接以获得更好的解释：https: //stackoverflow.com/a/18326668/335567
回答by AKIRA
Little code correction for bootstrap 3 (there is a litle bug when non minimized version of menu is clikcked /some flickering/)
引导程序 3 的小代码更正（点击非最小化版本的菜单时有一个小错误/一些闪烁/）
$('.navbar li a').click(function (event) {
var scrollPos = $('body > .container').find($(this).attr('href')).offset().top - (offsetHeight - 1);
$('body,html').animate({
scrollTop: scrollPos
}, 500, function () {
if ($("div.navbar-collapse").hasClass("in")) {
$(".navbar-toggle").click();
} else {
}
});
return false;});
回答by Zahid Hossain
In the CSS , bodytag's positionattribute should have the value relative
在 CSS 中，body标签的position属性应该有值relative
