如何在 Bootstrap 中设置 ScrollSpy 的偏移量? [英] How do I set the offset for ScrollSpy in Bootstrap?

查看：34
本文介绍了如何在 Bootstrap 中设置 ScrollSpy 的偏移量?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个网站，导航栏固定在主要内容区域的顶部和下方的 3 个 div.

我正在尝试使用 bootstrap 框架中的 scrollspy.

当您滚动 div 时，我成功地突出显示了菜单中的不同标题.

我也有，所以当你点击菜单时，它会滚动到页面的正确部分.但是，偏移量不正确(没有考虑到导航栏，所以我需要偏移大约40个像素)

我在 Bootstrap 页面 上看到它提到了一个偏移选项，但我我不知道如何使用它.

当它说你可以使用带有 $('#navbar').scrollspy() 的 scrollspy 时，我也不是什么意思，我不知道在哪里包含它，所以我没有't，一切似乎都在工作(偏移除外).

我认为偏移量可能是 body 标签上的 data-offset='10'，但它对我没有任何作用.

我有一种感觉，这是一件非常明显的事情，我只是想念它.有什么帮助吗?

我的代码是

<代码>...<!-- 注意:数据偏移对我没有任何作用--><body data-spy="scroll" data-offset="20"><div class="navbar navbar-fixed-top"><div class="navbar-inner"><div class="容器"><a class="brand" href="#">VIPS</a><ul class="nav">
  • <a href="#trafficContainer">交通</a>
  • <a href="#responseContainer">响应时间</a>
  • <a href="#cpuContainer">CPU</a>

    • <div class="容器"><div class="row"><div class="span12"><div id="trafficContainer" class="graph" style="position: relative;"><!-- 图表在这里-->

    <div class="row"><div class="span12"><div id="responseContainer" class="graph" style="position: relative;"><!-- 图表在这里-->

    <div class="row"><div class="span12"><div id="cpuContainer" class="graph" style="position: relative;"><!-- 图表在这里-->

    ...<script src="assets/js/jquery-1.7.1.min.js"></script><script src="assets/js/bootstrap-scrollspy.js"></script></html>

    解决方案

    Bootstrap 使用偏移量仅解决间谍问题，而不是滚动问题.这意味着滚动到正确的位置取决于您.

    试试这个，它对我有用:为导航点击添加一个事件处理程序.

    var offset = 80;$('.navbar li a').click(function(event) {event.preventDefault();$($(this).attr('href'))[0].scrollIntoView();scrollBy(0, -offset);});

    我在这里找到它:https://github.com/twitter/bootstrap/issues/3316

    I have a site with the navbar fixed on top and 3 divs underneath in the main content area.

    I'm trying to use scrollspy from the bootstrap framework.

    I have it succesfully highlighting the different headings in the menu when you scroll past the divs.

    I also have it so when you click the menu, it will scroll to the correct part of the page. However, the offset is incorrect (It's not taking into account the navbar, so I need to offset by about 40 pixels)

    I see on the Bootstrap page it mentions an offset option but i'm not sure how to use it.

    I'm also not what it means when it says you can use scrollspy with $('#navbar').scrollspy(), I'm not sure where to include it so I didn't and everything seems to be working (except the offset).

    I thought the offset might be the data-offset='10' on the body tag, but it doesn't do anything for me.

    I have a feeling that this is something really obvious and I'm just missing it. Any help?

    My code is

    ...
<!-- 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>

    解决方案

    Bootstrap uses offset to resolve spying only, not scrolling. This means that scrolling to the proper place is up to you.

    Try this, it works for me: add an event handler for the navigation clicks.

    var offset = 80;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});

    I found it here: https://github.com/twitter/bootstrap/issues/3316

    这篇关于如何在 Bootstrap 中设置 ScrollSpy 的偏移量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    其他开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆