9

我试图让 Bootstrap 的 scrollspy 在响应式站点上可靠地工作,在该站点上,顶部导航栏的高度根据媒体/浏览器的宽度而变化。因此,我不是硬编码属性上的偏移量,data-offset而是通过 Javascript 初始化动态设置它,如下所示:

$('body').scrollspy({ offset: 70, target: '#nav' });

对于宽布局(即 Bootstrap -lg),它可以正常工作,但对于较窄的布局,似乎存在“累积”偏移。换句话说,它在第一部分工作得很好,但随后需要增加像素来激活后面的部分(例如,下一个部分为 90 像素,第三部分为 110 像素,等等)。

我尝试按此答案中所述直接操作 scrollspy 对象: 如何在 Bootstrap 中设置 ScrollSpy 的偏移量?但无济于事。

有人可以推荐一种在响应式站点中实现 scrollspy 的规范方法,其中偏移量根据媒体宽度而变化?

附加信息:

data-我刚刚分析了这两种情况下的 scrollspy 对象,结果发现仅通过属性与通过 JS初始化时偏移列表是不同的。似乎当我通过 JS 初始化它时,偏移数组在一些 BS 响应调整发生之前填充,因此高度不同。在所有响应的东西都运行,我如何触发 scrollspy 的初始化?BS 调整布局后是否有挂钩/回调?是否涉及到 JS,或者所有响应式的东西都由 CSS 处理?

4

3 回答 3

18

不幸的是,当函数第一次被调用时,jQuerydata-*只会拉入一次属性。$().data(...)并且scrollspy只在初始化时读取一次选项。scrollspy的refresh功能不会重新加载任何选项。在同一个元素上再次调用$(..).scrollspy(...)会忽略任何新的数据选项(使用先前初始化的值)。

但是,scrollspy确实将选项值存储在键下的元素数据中'bs.scrollspy'。因此,您可以更改该options.offset数据键内的字段。

要考虑动态变化的导航栏高度和更改 scrollspy 偏移值的需要,您可以将以下示例用于可变高度的固定顶部导航栏。

下面做一些事情。

  • 它通过 javascript 初始化 scrollspy(在window.load事件触发之后),并从导航栏当前高度的偏移量开始(也将 body 的padding-top值调整为与导航栏高度相同)。
  • 监视调整大小事件并padding-top调整正文,并offset调整滚动间谍以匹配。然后refresh执行 a 以重新计算锚点偏移量。

HTML

<body>
  <style type="text/css">
    /* prevent navbar from collapsing on small screens */
    #navtop .navbar-nav > li { float: left !important; }
  </style>
  <nav id="navtop" class="navbar-fixed-top" role="navigation">
    <div class="container">
      <ul class="nav nav-pills navbar-nav">
        <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
      ... some more navlinks, or dynamically added links that affect the height ...
      </ul>
    </div>
  </nav>
  <section id="one">
   ...
  </section>
  <section id="two">
   ...
  </section>
  <section id="three">
   ...
  </section>
   ....
</body>

JavaScript

$(window).on('load',function(){
    var $body   = $('body'), 
        $navtop = $('#navtop'),
        offset  = $navtop.outerHeight();

    // fix body padding (in case navbar size is different than the padding)
    $body.css('padding-top', offset);
    // Enable scrollSpy with correct offset based on height of navbar
    $body.scrollspy({target: '#navtop', offset: offset });

    // function to do the tweaking
    function fixSpy() {
        // grab a copy the scrollspy data for the element
        var data = $body.data('bs.scrollspy');
        // if there is data, lets fiddle with the offset value
        if (data) {
            // get the current height of the navbar
            offset = $navtop.outerHeight();
            // adjust the body's padding top to match
            $body.css('padding-top', offset);
            // change the data's offset option to match
            data.options.offset = offset;
            // now stick it back in the element
            $body.data('bs.scrollspy', data);
            // and finally refresh scrollspy
            $body.scrollspy('refresh');
        }
    }

    // Now monitor the resize events and make the tweaks
    var resizeTimer;
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(fixSpy, 200);
    });
});

就是这样。不漂亮,但它绝对有效。我上面的 HTML 可能需要一些调整。

如果您将元素动态添加到导航栏,则需要fixSpy()在插入后调用。或者您可以fixSpy()通过setInterval(...)计时器调用以一直运行。

于 2014-01-12T06:41:17.463 回答
2

Scrollspy 在初始化后设置一个目标列表/偏移量。如果你调整你的屏幕 scrollspy 不会再次初始化。您将重新加载页面以重新计算偏移量。

您提到的“累积”偏移量是由具有不同内容高度的相同偏移量列表引起的。

还可以通过注意触发此重新加载,$(window).resize()某些浏览器会触发两次,请参阅https://stackoverflow.com/a/4298653/1596547以获取解决方案:

var id; 

$(window).resize(function() 
{
    clearTimeout(id);
    id = setTimeout($('body').scrollspy({ target: '' }), 500);
});

请注意http://getbootstrap.com/javascript/#scrollspy上的文档告诉您类似的内容:

“当使用 scrollspy 并在 DOM 中添加或删除元素时,您需要调用 refresh 方法”

有了上面的内容,你会得到类似的东西:

var id; 

$(window).resize(function() 
{
    clearTimeout(id);
    id = setTimeout($('[data-spy="scroll"]').each(function () {var $spy = $(this).scrollspy('refresh'}), 500);
});

注意:scollspy 插件使用 jQuery 的 scrollTop() 函数进行计算。所以也读这个:http ://blog.jonathanargentiero.com/?p=134 。

于 2013-08-15T11:37:52.977 回答
1

我知道最初的问题要求 BS3,但我没有找到 BS4 的正确和简单的答案。因此,我现在附上我的解决方案,它对我来说非常有效。

从 BS4 开始,配置位置发生了变化。如果您正在寻找正确的位置以直接更改offset。这里是:$('body').data('bs.scrollspy')._config.offset。此外,如果您希望直接更改生效。之后打电话$('body').scrollspy('refresh');。现在,scrollspy 尊重偏移量。

基于这种方法,我编写了一个小片段,它可以帮助您为特定的导航容器(例如 BS4 导航栏)动态调整偏移量。

var initScrollSpy = function() {
  var navContainer = '#mainNav'; // your navigation container

  // initial bind of scrollspy
  var bindScrollSpy = function() {
      $('body').scrollspy({
          target: navContainer,
          offset: getOffset() // determine your offset
      });
  }

  // get your offset dynamically
  var getOffset = function() {
      return $(navContainer).outerHeight();
  };

  // update the offset but only if the container size changed
  var updateOffset = function() {
      var cfg = $('body').data('bs.scrollspy')._config;
      if(cfg.offset != getOffset()){
          cfg.offset = getOffset();
          $('body').scrollspy('refresh');
      }
  }

  bindScrollSpy(); // bind scrollspy 
  $(window).resize(updateOffset); // react on resize event
  $(".collapse").on('shown.bs.collapse', updateOffset); // react on BS4 menu shown event (only on mobile). You might omit this line if your navigation has no change in height when opened on mobile
};

initScrollSpy(); // finally call snippet

我附上了代码中片段的解释。但通常我会像往常一样绑定 scrollspy 偏移量。此外,我们还有两个活动。一种对窗口调整大小作出反应,另一种对导航栏作出反应,完全显示。在这两个事件的情况下,我检查偏移值是否与所需的不同,并直接在 scrollspy 中更新它,就是这样。

于 2020-02-23T12:28:19.927 回答