如何在Bootstrap中设置ScrollSpy的偏移量？
我有一个网站，在主要内容区域顶部固定的导航栏和3个div下面。
我试图从bootstrap框架中使用scrollspy。
当你滚动div时，我已经成功地突出了菜单中的不同标题。
我也有它，所以当你点击菜单，它将滚动到页面的正确部分。 但是， 偏移是不正确的 （这不考虑导航栏，所以我需要约40像素的偏移量）
我在Bootstrap页面上看到它提到了一个偏移选项，但我不知道如何使用它。
我也不是什么意思，当它说你可以使用Scrollspy与$('#navbar').scrollspy() ，我不知道在哪里包括它，所以我没有，一切似乎工作（除偏移量）。
我认为这个偏移量可能是body标签上的data-offset='10' ，但是它对我没有任何帮助。
我有一种感觉，这是真的很明显，我只是想念它。 任何帮助？
我的代码是
... <!-- note: the data-offset doesn't do anything for me --> <body data-spy="scroll" data-offset="20"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">VIPS</a> <ul class="nav"> <li class="active"> <a href="#trafficContainer">Traffic</a> </li> <li class=""> <a href="#responseContainer">Response Times</a> </li> <li class=""> <a href="#cpuContainer">CPU</a> </li> </ul> </div> </div> </div> <div class="container"> <div class="row"> <div class="span12"> <div id="trafficContainer" class="graph" style="position: relative;"> <!-- graph goes here --> </div> </div> </div> <div class="row"> <div class="span12"> <div id="responseContainer" class="graph" style="position: relative;"> <!-- graph goes here --> </div> </div> </div> <div class="row"> <div class="span12"> <div id="cpuContainer" class="graph" style="position: relative;"> <!-- graph goes here --> </div> </div> </div> </div> ... <script src="assets/js/jquery-1.7.1.min.js"></script> <script src="assets/js/bootstrap-scrollspy.js"></script> </body> </html>
引导程序使用偏移来解决间谍只，而不是滚动。 这意味着滚动到适当的位置取决于你。
试试这个，它适用于我：为导航点击添加一个事件处理程序。
var offset = 80; $('.navbar li a').click(function(event) { event.preventDefault(); $($(this).attr('href'))[0].scrollIntoView(); scrollBy(0, -offset); });
我在这里find它： https ： //github.com/twitter/bootstrap/issues/3316
Tim提到的诀窍是利用填充。 所以问题是，您的浏览器总是想要将您的锚点滚动到窗口的顶部。 如果你把你的文字设置在你的文字实际开始的地方，它将被你的菜单栏遮住。 相反，你要做的是将你的锚点设置到容器<section>或者<div>标记的id，nav / navbar会自动使用它。 然后，您必须将容器的padding-top设置为所需的偏移量，并将容器的margin-top为与padding-top 相反 。 现在，您的容器块和锚点从页面的顶部开始，但是内部的内容直到菜单栏下才开始。
如果您使用常规锚点，则可以使用上面的容器中的负边界顶点来完成相同的操作，但不能使用填充。 然后你把一个普通的<a target="...">锚点作为容器的第一个孩子。 然后，使用相反但相等的margin-top设置第二个子元素，但使用select器.container:first-child + 。
这一切都假定你的<body>标签已经有了它的页边空白的限制，这是标准（否则页面会在屏幕上显示被遮挡的文本）。
这是一个在行动中的例子。 您网页上的任何内容都可以通过将＃elements-id附加到您的url的末尾来链接。 如果你把所有的h标签都带到链接能力的id标签（ 像github那样 ），用一些脚本来注入一些链接到它们的左边 ; 将以下内容添加到您的CSS将照顾您的导航栏偏移量：
body { margin-top: 40px;/* make room for the nav bar */ } /* make room for the nav bar */ h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], dt[id]{ padding-top: 60px; margin-top: -40px; }
如果你想要一个10的偏移量，你会把它放在你的头上：
<script> $('#navbar').scrollspy({ offset: 10 }); </script>
你的身体标签看起来像这样：
<body data-spy="scroll">
你可以用这个（假设你正在监视身体）改变Scrollspy的偏移量：
offsetValue = 40; $('body').data().scrollspy.options.offset = offsetValue; // force scrollspy to recalculate the offsets to your targets $('body').data().scrollspy.process();
如果您需要dynamic更改偏移值，这也适用。 （我喜欢滚动切换下一个部分是在窗口的一半左右，所以我需要改变窗口resize的偏移量。）
从引导问题＃3316 ：
[这]只是为了修改滚动计算 – 我们不会改变实际的锚定点击
所以设置偏移只影响Scrollspy认为页面滚动的位置 。 点击锚标签时不会影响滚动 。
使用固定的导航栏意味着浏览器正在滚动到错误的地方。 你可以用JavaScript来解决这个问题：
var navOffset = $('.navbar').height(); $('.navbar li a').click(function(event) { var href = $(this).attr('href'); // Don't let the browser scroll, but still update the current address // in the browser. event.preventDefault(); window.location.hash = href; // Explicitly scroll to where the browser thinks the element // is, but apply the offset. $(href)[0].scrollIntoView(); window.scrollBy(0, -navOffset); });
但是，为了确保滚动高亮显示正确的当前元素，您仍然需要设置偏移量：
<body class="container" data-spy="scroll" data-target=".navbar" data-offset="70">
这里是JSFiddle的完整演示 。
或者，您可以填充到您的定位标记，如CSS技巧所示 。
a[id]:before { display: block; content: " "; // Use the browser inspector to find out the correct value here. margin-top: -285px; height: 285px; visibility: hidden; }
我认为这个偏移可能会对该部分的底部位置做些什么。
我通过添加来解决我的问题，就像你的问题一样
padding-top: 60px;
在bootstrap.css部分的声明中
希望有所帮助！
我在每个h1元素之前添加了40px高度的.vspace元素。
<div class="vspace" id="gherkin"></div> <div class="page-header"> <h1>Gherkin</h1> </div>
在CSS中：
.vspace { height: 40px;}
它工作得很好，空间不窒息。
我遇到了acjohnson55和Kurt UXD解决scheme的问题。 两者都用于点击哈希链接，但滚动偏移量仍然不正确。
我想出了以下解决scheme：
<div class="anchor-outer"> <div id="anchor"> <div class="anchor-inner"> <!-- your content --> </div> </div> </div>
和相应的CSS：
body { padding-top:40px; } .anchor-outer { margin-top:-40px; } .anchor-inner { padding-top:40px; } @media (max-width: 979px) { body { padding-top:0px; } .anchor-outer { margin-top:0px; } .anchor-inner { padding-top:0px; } } @media (max-width: 767px) { body { padding-top:0px; } .anchor-outer { margin-top:0px; } .anchor-inner { padding-top:0px; } }
你将需要用你的导航栏的高度和锚点的IDreplace40px的填充/边距。
在这个设置中，我甚至可以观察到为data-offset属性设置一个值的效果。 如果发现100-200左右的数据偏移值较大，则会导致更多的预期行为（如果标题大约在屏幕中间，则会出现滚动“切换”）。
我还发现Scrollspy对非封闭的div标签（这很明显）是非常敏感的，所以http://validator.w3.org/check是我的朋友。;
在我看来，Scrollspy最适合于带有锚点ID的整个部分，因为当向后滚动时，常规的锚点元素不会带来预期的效果（一旦你点击了锚元素，例如你的标题，滚动“开关”那时你已经滚动了用户期望属于相关标题的内容）。
你也可以打开bootstap-offset.js并修改
$.fn.scrollspy.defaults = { offset: 10 }
那里。
刚刚设置：
data-offset="200"
data-offset默认为“50”，相当于10px，所以只需增加data-offset解决问题。
