Question

顶部固定菜单出现问题。当我滚动页面时，菜单的活动类别将根据当前部分而变化-固定菜单的高度，但是当我单击菜单中的链接时，活动类别将被添加到该链接中，但滚动页面不会更改其类别直到我刷新页面。

<div class="menu-area">
  <div class="menu-button"></div>
  <div class="menu">
    <div class="logo"></div>
    <ul>
      <li>
        <a href="#1" class="button">1</a>
      </li>
      <li>
        <a href="#2" class="button">2</a>
      </li>
      <li>
        <a href="#3" class="button">3</a>
      </li>
      <li>
        <a href="#4" class="button">4</a>
      </li>
    </ul>
  </div>
</div>

$(document).ready(function() {
  $(document).on("scroll", onScroll);
  $('.button').on('click', function(e) {
    e.preventDefault();
    $(document).off("scroll");
    $('a').each(function() {
      $(this).removeClass('active');
    })
    $(this).addClass('active');

    if (e.target.hash !== '') {
      $('html, body').stop().animate({
        scrollTop: $(e.target.hash).offset().top - $(".menu-area-box").outerHeight(true)
      }, 650);
      return false;
    }
  });
});

function onScroll(event) {
  var scrollPos = $(document).scrollTop() + $(".menu-area-box").outerHeight(true);
  $('.menu a').each(function() {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $('.menu ul li a').removeClass("active");
      currLink.addClass("active");
    } else {
      currLink.removeClass("active");
    }
  });
}

由于使用了80px固定菜单，因此我使用“哈希掩码”来防止url中的#NaN，但我不知道问题出在哪里。

Answer 1

我不确定，但是您在第8行缺少分号了吗？

滚动时单击事件后，活动菜单项不会更改其类别

1 个答案: