jQuery при изменении прокрутки активный класс не работает - PullRequest
0 голосов
/ 19 апреля 2020

Итак, я пытаюсь создать закрепленный раздел с вертикальной навигацией, который переключает активные классы во время прокрутки содержимого. После того, как я начну прокручивать страницу вниз, активные классы начнут меняться, но мой раздел стикеров даже не виден. Это, как jQuery, рассчитывается с самого верха сайта, а не внутри моего липкого раздела. Я надеюсь, ясно, что я пытаюсь объяснить.

HTML

    <nav class="sticky-menu">
    <ul>
      <li><a href="#section1">SECTION 1</a></li>
      <li><a href="#section2">SECTION 2</a></li>
      <li><a href="#section3">SECTION 3</a></li>
      </ul>
    </nav>

    <div class="sticky-content">
  <div id="section1">
    CONTENT 1
  </div>
   <div id="section2">
    CONTENT 2
  </div>
   <div id="section3">
    CONTENT 3
  </div>
</div>

Div-объекты с липким содержимым имеют высоту 300 пикселей каждый. А в меню-наклейке есть позиция: наклейка сверху: 80px

jQuery(document).ready(function() {
        jQuery('a[href*=#]').bind('click', function(e) {
                e.preventDefault(); // prevent hard jump, the default behavior

                var target = jQuery(this).attr("href"); // Set the target as variable

                // perform animated scrolling by getting top-position of target-element and set it as scroll target
                 jQuery('html, body').stop().animate({
                        scrollTop: jQuery(target).offset().top
                }, 600, function() {
                        location.hash = target; //attach the hash (#jumptarget) to the pageurl
                });

                return false;
        });
});

jQuery(window).scroll(function() {
        var scrollDistance = jQuery(window).scrollTop();

        // Show/hide menu on scroll
        //if (scrollDistance >= 850) {
        //      $('nav').fadeIn("fast");
        //} else {
        //      $('nav').fadeOut("fast");
        //}

        // Assign active class to nav links while scolling
        jQuery('.sticky-content div').each(function(i) {
                if (jQuery(this).position().top <= scrollDistance) {
                        jQuery('.sticky-menu li a.active').removeClass('active');
                        jQuery('.sticky-menu li a').eq(i).addClass('active');
                }
        });
}).scroll();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...