Question

我正在使用右侧固定菜单的页面上工作，只要存在link-list-item类的标题，就会生成该菜单。每当这些项目在滚动上传递时，我想用活动类更新菜单。我遇到的问题是，只有当滚动到达标题时才会更新，之后会将其删除。我希望菜单项保持活动类，直到它到达下一个标题，或者滚动点上方没有标题。在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');
         }
      }
};

我更喜欢它反过来，这意味着每个滚动我遍历所有标题（而不是链接）。因此，在每次滚动运动时，您会查看是否在100px内有一个顶部和底部的标题 - 如果是，则从所有链接中删除活动类并添加当前标题的类。

小提琴：https://jsfiddle.net/n0scg0m5/

在滚动问题

1 个答案: