Выделите навигационную ссылку при прокрутке вниз до div с помощью путевых точек
Я искал это некоторое время, и я не мог найти правильного решения для себя. Я как бы собираю вещи из разных статей, но я могу выделить только ссылки, и, похоже, он не удаляет класс, когда я прокручиваю назад. Кроме того, когда я прокручиваю вниз, выделяются все ссылки, а не только одна ссылка, связанная с div.
var $navLinks = $('#about-nav > a');
$navLinks.each(function() {
var $self = $(this);
$(this).waypoint({
handler: function() {
$self.addClass('current');
}
});
});
Ответы 1
Путевые точки обычно просто связаны с ссылками на контент с помощью хэштегов и соответствующих идентификаторов. Я не вижу этой ссылки в вашем примере, вероятно, поэтому она не работает для вас ... Или, может быть, она была бы там, если бы вы были более щедры со всем контекстом;)
Вам нужен ретранслятор, который передает текущий класс от предыдущего к следующему, и вам нужна связь между контентом и навигационной ссылкой, чаще всего что-то вроде хэштега, указывающего на контент.
Идея такая:
<nav>
<li><a href = "#waypoint1">Go to content1</a></li>
<li><a href = "#waypoint2">Go to content2</a></li>
<li><a href = "#waypoint3">Go to content3</a></li>
</nav>
И затем у вас есть блок содержимого со всеми вашими путевыми точками от waypoint1 до waypoint3 внутри, например:
<div id='your-waypoints'>
<div id='waypoint1' class='waypoint'>
blah-blah-blah
</div>
<div id='waypoint2' class='waypoint'>
blah-blah-blah
</div>
<div id='waypoint3' class='waypoint'>
blah-blah-blah
</div>
</div>
Соединение точек через скрипт, например:
function getWaypointNavRef( WaypointId ) {
return $('nav a[href = "#' + WaypointId + '"]');
}
var lastNavRef = null;
function WaypointRelay( WaypointId ) {
var nextNavRef = getWaypointNavRef( WaypointId );
if (lastNavRef)
$(lastNavRef).removeClass('current');
$(nextNavRef).addClass('current');
lastNavRef = nextNavRef;
}
Что вызывается из обработчика:
$('#your-waypoints > .waypoint').each(function () {
new Waypoint({
element: document.getElementById(this.id),
handler: function (direction) {
WaypointRelay(this.element.id);
},
context: document.getElementById('your-waypoints')
});
});
Это означает, что на самом деле это контент, который ссылается на навигацию при прокрутке страницы вниз ...
Вероятно, это относится к неправильному идентификатору. Пожалуйста, покажите связь между div и nav.
Я перефразировал свое первоначальное предложение на более подробном примере.
Я просто не очень понимаю, как эти функции точно получают каждый тег. Или зачем нужна функция getWaypointNavRef. Или функция реле. Зачем устанавливать значение lasNavRef равным нулю? Я совершенно потерялся здесь. Я уже некоторое время изучаю javascript и до сих пор не могу написать ничего, что работает ... Я просто не понимаю этого. Но большое спасибо за вашу помощь.
Вероятно, это будет иметь больше смысла с визуализацией. Вот очень элегантная версия: codepen.io/jakob-e/pen/mhCyx, он использует не реле, а toggleClass, но его CSS также имеет длину в милю. Он также использует направление («вверх» | «вниз»), чтобы определить, когда переключаться (вкл | выкл).
Я попробовал это, и теперь ни с одной из ссылок ничего не происходит. var last = null; функция WaypointRelay (следующий) {следующий = '#' + следующий; если (последний) $ (последний) .removeClass ('текущий'); $ (следующий) .addClass ('текущий'); последний = следующий; } var $ navLinks = $ ('# about-nav> a'); $ navLinks.each (function () {var $ self = $ (this); $ (this) .waypoint ({handler: function (direction) {WaypointRelay (this.element.id);}});});