Question

所以我想在固定的导航栏中构建一个指示器，向用户显示他们所在的页面的哪个部分，并在滚动时进行适当的更改，基本上重新创建this Bootstrap effect。

这是我到目前为止所拥有的：

HTML

<li class='page-nav' data-dest='thing1'><a>Event Info</a></li>
<li class='page-nav' data-dest='thing2'><a>Venue</a></li>

JS

var sections = []; 
$('.page-nav').each(function() {
    var destination = $(this).data('dest');
    sections.push('#'+destination);
})

这给了我一个这样的数组：

["#thing1", "#thing2"]

我怎么能写一个window.scroll函数来观察数组中的任何DOM元素是否输入了scrollspy？类似的东西：

$(window).scroll(function () {
    ($(any-of-the-sections).on('scrollSpy:enter', function() {
        $(whichever-section-entered).addClass('active');
    })
})

Answer 1

尝试以下方法：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="utf-8">
  </head>
  <body>

    <ul>
      <li class='page-nav' data-dest='thing1'><a href="#">Event Info</a></li>
      <li class='page-nav' data-dest='thing2'><a href="#">Venue</a></li>
    </ul>

    <hr>

    <div id="thing1">
      <p>Sed suscipit libero eros, ut dictum orci ullamcorper eu. Suspendisse hendrerit arcu felis, eget fermentum erat vulputate vitae. In sagittis sapien sed ex maximus commodo. Maecenas ultrices, ex eu commodo iaculis, massa tortor posuere lorem, sit amet sodales purus odio pellentesque nunc. Donec tellus enim, finibus id tincidunt et, vestibulum a justo. Morbi venenatis sapien sit amet interdum dictum. Vivamus et diam justo. Nunc ultrices placerat nibh, in convallis justo efficitur a. Morbi ut pharetra urna. Vestibulum id nulla id tellus fringilla mollis in non lorem. Ut vitae diam accumsan, finibus velit eget, cursus orci. Ut sem enim, mollis ut ullamcorper quis, scelerisque vitae ex.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut enim molestie, ullamcorper eros in, vehicula enim. Proin id blandit turpis, sed varius dui. Suspendisse sodales nec nisi interdum aliquam. Cras auctor orci orci. Mauris sit amet iaculis leo, eget aliquam turpis. Proin ac dapibus mi. Nullam arcu risus, elementum ut felis et, pellentesque aliquet felis. Proin interdum luctus aliquet.</p>
      <p>Curabitur laoreet, mi scelerisque pharetra consequat, ex urna volutpat ligula, eu sodales nisi felis nec tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus libero neque, dictum in metus vel, lobortis sodales odio. Nullam vestibulum at dolor et semper. Sed ac nibh malesuada, consectetur est ut, gravida dolor. Etiam rhoncus ultricies arcu sed pretium. Curabitur accumsan vel erat ac porttitor.</p>
      <p>Proin nec lorem magna. Nullam lectus ex, rhoncus non libero ornare, placerat pharetra turpis. Sed commodo dui ut dictum ullamcorper. Nunc dui mi, iaculis non elit ac, pretium mattis nunc. Curabitur interdum dignissim quam, quis vulputate lectus. Sed enim massa, faucibus quis ante ac, eleifend scelerisque velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit accumsan rhoncus. Donec sagittis egestas tellus, non scelerisque dolor commodo porta. Ut vehicula suscipit orci vel bibendum. Nulla facilisi. Cras sit amet molestie urna, quis blandit metus. Sed a arcu massa. Integer varius finibus neque in venenatis.</p>
      <p>Sed suscipit libero eros, ut dictum orci ullamcorper eu. Suspendisse hendrerit arcu felis, eget fermentum erat vulputate vitae. In sagittis sapien sed ex maximus commodo. Maecenas ultrices, ex eu commodo iaculis, massa tortor posuere lorem, sit amet sodales purus odio pellentesque nunc. Donec tellus enim, finibus id tincidunt et, vestibulum a justo. Morbi venenatis sapien sit amet interdum dictum. Vivamus et diam justo. Nunc ultrices placerat nibh, in convallis justo efficitur a. Morbi ut pharetra urna. Vestibulum id nulla id tellus fringilla mollis in non lorem. Ut vitae diam accumsan, finibus velit eget, cursus orci. Ut sem enim, mollis ut ullamcorper quis, scelerisque vitae ex.</p>
    </div>

    <hr>

    <div id="thing2">
      <p>Mauris in lacus metus. Sed vitae aliquet ligula. Sed eget arcu ornare lacus efficitur interdum quis at dui. Cras rhoncus, odio eget ultricies sollicitudin, sem sapien scelerisque leo, sit amet auctor nibh risus at erat. Sed vitae metus pretium neque porttitor sollicitudin pellentesque laoreet lacus. Donec luctus tellus et maximus venenatis. Nulla eget aliquet nulla, aliquet cursus purus. In viverra erat a pharetra egestas. In id faucibus velit, et sagittis ex. Aliquam ut semper nunc. Sed id tempus nisl. Nunc tincidunt porta velit, sit amet sagittis velit porttitor ut. Cras feugiat pulvinar augue in consectetur. Praesent quis nisl purus. Suspendisse aliquet metus eros, a aliquet risus viverra consectetur. Aliquam a nulla sit amet erat iaculis facilisis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut enim molestie, ullamcorper eros in, vehicula enim. Proin id blandit turpis, sed varius dui. Suspendisse sodales nec nisi interdum aliquam. Cras auctor orci orci. Mauris sit amet iaculis leo, eget aliquam turpis. Proin ac dapibus mi. Nullam arcu risus, elementum ut felis et, pellentesque aliquet felis. Proin interdum luctus aliquet.</p>
      <p>Curabitur laoreet, mi scelerisque pharetra consequat, ex urna volutpat ligula, eu sodales nisi felis nec tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus libero neque, dictum in metus vel, lobortis sodales odio. Nullam vestibulum at dolor et semper. Sed ac nibh malesuada, consectetur est ut, gravida dolor. Etiam rhoncus ultricies arcu sed pretium. Curabitur accumsan vel erat ac porttitor.</p>
      <p>Proin nec lorem magna. Nullam lectus ex, rhoncus non libero ornare, placerat pharetra turpis. Sed commodo dui ut dictum ullamcorper. Nunc dui mi, iaculis non elit ac, pretium mattis nunc. Curabitur interdum dignissim quam, quis vulputate lectus. Sed enim massa, faucibus quis ante ac, eleifend scelerisque velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit accumsan rhoncus. Donec sagittis egestas tellus, non scelerisque dolor commodo porta. Ut vehicula suscipit orci vel bibendum. Nulla facilisi. Cras sit amet molestie urna, quis blandit metus. Sed a arcu massa. Integer varius finibus neque in venenatis.</p>
      <p>Sed suscipit libero eros, ut dictum orci ullamcorper eu. Suspendisse hendrerit arcu felis, eget fermentum erat vulputate vitae. In sagittis sapien sed ex maximus commodo. Maecenas ultrices, ex eu commodo iaculis, massa tortor posuere lorem, sit amet sodales purus odio pellentesque nunc. Donec tellus enim, finibus id tincidunt et, vestibulum a justo. Morbi venenatis sapien sit amet interdum dictum. Vivamus et diam justo. Nunc ultrices placerat nibh, in convallis justo efficitur a. Morbi ut pharetra urna. Vestibulum id nulla id tellus fringilla mollis in non lorem. Ut vitae diam accumsan, finibus velit eget, cursus orci. Ut sem enim, mollis ut ullamcorper quis, scelerisque vitae ex.</p>
    </div>

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="scrollspy.js"></script>
    <script>
      var sections = [];

      $('.page-nav').each(function() {
        var destination = $(this).data('dest');
        sections.push('#'+destination);
      });

      $.each(sections, function(index, value) {
        var section = $(sections[index]);

        $(section).scrollSpy();

        $(section).on('scrollSpy:enter', function() {
          $(this).addClass('active');
        });

        $(section).on('scrollSpy:exit', function() {
          $(this).removeClass('active');
        });
      });
    </script>
  </body>
</html>

在上面的代码中，可以在任何给定时间激活多个部分。仅仅因为#thing2已变得可见并不意味着#thing1必须在视口之外滚动。

如果要确保在任何给定时间只有一个部分具有active类，则可以删除scrollSpy:exit事件处理程序并修改scrollSpy:enter事件处理程序，使其看起来像这样：

$(section).on('scrollSpy:enter', function() {
  $.each(sections, function(index, value) {
    $(sections[index]).removeClass('active');
  });
  $(this).addClass('active');
});

在此代码的修改版本中，当一个部分滚动到视图中时，我们会从每个部分中删除active类，然后将其添加到已滚动到视图中的部分。

多次显示多个div的Window Scroll监听器？

1 个答案: