Wordpress/JQuery: Выделите соответствующие анкеры при ДИВ в окне просмотра на свитке

Question

В настоящее время я пытаюсь реализовать меню для Wordpress сайта со следующими критериями:

1. Когда пользователь прокручивает вниз страницы и достигает привязанный div (связанный в меню), ссылка в меню должна получить класс «active».
2. Когда пользователь нажимает на якорь, страница должна прокрутить до привязанного div, и ссылка должна получить «активный» класс.

Вот HTML с этой страницы:

<nav class="sub-navigation"> 
 
<ul class="secondary-link"> 
 
<li><a href="#team"><span>Team</span></a></li> 
 
<li><a href="#guidelines"><span>Guidelines</span></a></li> 
 
<li><a href="#clients"><span>Clients</span></a></li> 
 
</ul> 
 
</nav>

Следующий код работает почти - однако, он выдает следующее сообщение об ошибке:

Uncaught Error: Syntax error, unrecognized expression: http://domain.com/not-the-current-page

jQuery(document).ready(function() { 
 
    
 
    jQuery(document).on("scroll", onScroll); 
 
    jQuery('.secondary-link a').click(function(event) { 
 
    event.preventDefault(); 
 
    jQuery(document).off("scroll"); 
 
    var link = this; 
 
    jQuery.smoothScroll({ 
 
     offset: -100, 
 
     speed: 1000, 
 
     scrollTarget: link.hash 
 
    }); 
 
    }); 
 
    jQuery('.secondary-link a').click(function(){ 
 
    jQuery('.secondary-link a').removeClass('active'); 
 
    jQuery(this).addClass('active'); 
 
    jQuery(document).on("scroll", onScroll); 
 
    }); 
 

 
    function onScroll(event){ 
 
    var scrollPos = jQuery(document).scrollTop(); 
 
    jQuery('.secondary-link a').each(function() { 
 
     var currLink = jQuery(this); 
 
     var refElement = jQuery(currLink.attr('href')); 
 
     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
 
      jQuery('.secondary-link a').removeClass("active"); 
 
      currLink.addClass("active"); 
 
     } 
 
     else{ 
 
      currLink.removeClass("active"); 
 
     } 
 
    }); 
 
    } 
 
});

Логика заключается в следующем:

1. Слушайте свитка и добавьте "активный" класс соответственно.
2. При щелчке на ссылке, остановка (1.), выделите якорь, добавить класс «активный», а затем возобновить (1.)

Это моя первая работа с JQuery. Надеюсь, один из вас может указать мне в правильном направлении, как правильно это сделать. Ваша помощь очень ценится!

Answer 1

Наконец понял, что идет не так:

1. меню содержит ссылку, которая не была якорем, следовательно, ошибка Uncaught Error: Syntax error, unrecognized expression: http://domain.com/not-the-current-page

После устранения этого появилась другая ошибка:

Uncaught TypeError: Cannot read property 'top' of undefined 

Я избавился от этого, следуя the logic here

В основном мне пришлось проверить, содержит ли объект jQuery какой-либо элемент, прежде чем я попытаюсь получить его смещение.

Рабочий JQuery код для подсветки ссылок и гладкой прокрутки теперь выглядит следующим образом:

jQuery(document).ready(function() { 
 
    jQuery(document).on("scroll", onScroll); 
 
    jQuery('.secondary-link a').click(function(event) { 
 
    event.preventDefault(); 
 
    jQuery(document).off("scroll"); 
 
    var link = this; 
 
    jQuery.smoothScroll({ 
 
     offset: -100, 
 
     speed: 1000, 
 
     scrollTarget: link.hash 
 
    }); 
 
    }); 
 

 
    jQuery('.secondary-link a').click(function(){ 
 
    jQuery(document).off("scroll"); 
 
    jQuery('.secondary-link a').removeClass('active'); 
 
    jQuery(this).addClass('active'); 
 
    jQuery(document).on("scroll", onScroll); 
 
    }); 
 

 
    function onScroll(event){ 
 
    var scrollPos = jQuery(document).scrollTop(); 
 
    jQuery('.secondary-link a').each(function() { 
 
     var currLink = jQuery(this); 
 
     var refElement = jQuery(currLink.attr('href')); 
 
     if (refElement.length) { 
 
     if (refElement.position().top-100 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
 
      jQuery('.secondary-link a').removeClass("active"); 
 
      currLink.addClass("active"); 
 
     } 
 
     else{ 
 
      currLink.removeClass("active"); 
 
     } 
 
     } 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Для того, чтобы воспроизвести, вы будете нуждаться в smoothscroll library available here. Однако это работает в целом, но не уверен в производительности. Ура!