Активный пункт меню не изменит свой класс после события щелчка при прокрутке - PullRequest
Новая
       26

Активный пункт меню не изменит свой класс после события щелчка при прокрутке

0 голосов
/ 24 октября 2018

У меня проблема с верхним фиксированным меню.Когда я прокручиваю страницу, активный класс для меню меняется в зависимости от текущего раздела - высоты фиксированного меню, но когда я нажимаю на ссылку в меню, активный класс будет добавлен к этой ссылке, но прокрутка страницы не изменит их классбольше, пока я не обновлю страницу. 

<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");
    }
  });
}

Я использовал "маску хэша", чтобы предотвратить #NaN в URL из-за фиксированного меню 80px, но я не знаю, где проблема.

1 Ответ

0 голосов
/ 24 октября 2018

Я не уверен, но вы пропустили точку с запятой в 8-м ряду?

...