javascript - 更新滚动问题的类

Question

我正在处理一个右侧有固定菜单的页面，只要存在带有 link-list-item 类的 header ，就会生成该菜单。每当这些项目在滚动上传递时，我想用事件类更新菜单。我遇到的问题是，只有当滚动到达标题时它才会更新，之后就会被删除。我希望菜单项保持事件类，直到到达下一个标题，或者滚动点上方没有标题。按照页面的构成方式，将每个部分包装在 div 中并不是一个选项。

这是我的标记:

<div class="col-xs-6">
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <header class="header-tab-label row">
    <h5 id="alaska" class="link-list-label">Alaska</h5>
  </header>
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <header class="header-tab-label row">
    <h5 id="austin" class="link-list-label">Austin</h5>
  </header>
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <header class="header-tab-label row">
    <h5 id="england" class="link-list-label">England</h5>
  </header>
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
  <p>Your bones don't break, mine do. That's clear.</p> 
</div>

Javascript:

(function($) {

  $linklistLabel = $(".link-list-label");
  $linkList = $(".link-list");
  $linkListItem = $linkList.find("li");

  $linklistLabel.each(function(index) {
    $linkList.append('<a href="#' + $(this).text().toLowerCase() + '"><li>' + $(this).text() + '</li></a>');
  });

  function onScroll(event) {
    var scrollPos = $(document).scrollTop();
    $linkList.find('a').each(function() {
      var currLink = $(this);
      console.log(currLink);
      var refElement = $(currLink.attr("href"));
      if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $linkListItem.removeClass("active");
        currLink.addClass("active");
      } else {
        currLink.removeClass("active");
      }
    });
  }

  $(document).ready(function() {
    $(document).on("scroll", onScroll);

    //smoothscroll
    $('a[href^="#"]').on('click', function(e) {
      e.preventDefault();
      $(document).off("scroll");

      $('a').each(function() {
        $(this).removeClass('active');
      })
      $(this).addClass('active');

      var target = this.hash,
        menu = target;
      $target = $(target);
      $('html, body').stop().animate({
        'scrollTop': $target.offset().top + 2
      }, 500, 'swing', function() {
        window.location.hash = target;
        $(document).on("scroll", onScroll);
      });
    });
  });

})(jQuery);

JSFiddle:https://jsfiddle.net/kx8Ljm9t/1/

Answer 1

编码速度非常快 - 这需要更多测试:

$linkListA = $(".link-list a");
function onScroll(event) {
      var scrollPos = $(document).scrollTop();
      for (var i = 0; i < $linklistLabel.length; i++) {
         if ($linklistLabel.eq(i).offset().top - scrollPos < 100 &&
          $linklistLabel.eq(i).offset().top - scrollPos > -100) {
                 $linkListA.removeClass('active');
                 var id = $linklistLabel.eq(i).prop('id');
                 $('a[href="#'+id+'"]').addClass('active');
         } else if ($linklistLabel.eq(0).offset().top - scrollPos  >= 100) {
                 $linkListA.removeClass('active');
         }
      }
};

我更喜欢相反的方式，这意味着在每次滚动时我都会循环遍历所有标题(而不是链接)。因此，在每次滚动移动时，您都会查看顶部和底部 100 像素内是否有标题 - 如果是，则从所有链接中删除事件类并添加当前标题的类。

fiddle :https://jsfiddle.net/n0scg0m5/