Первый раз здесь. Обычно я могу найти ответы на вопросы, но мне трудно понять это.
Цель:
У меня есть одностраничный макет с боковой панелью навигации, которая при нажатии прокручивает вниз до элемента на страница. Однако, если пользователь просто прокручивает страницу вниз к определенному элементу #id
, я хочу, чтобы соответствующая ссылка в навигации стала .active
. Ссылка навигации и соответствующий элемент имеют одно и то же значение через element # id
и a [name]
.
Аналогично: NikeBetterWorld.com
Пример HTML ниже:
content goes here
Очевидно, здесь больше разделов, ссылок, элементов и т. д. Но в этом суть. Поэтому, когда пользователь прокручивает вниз до section # value
, a [value]
получит активный класс.
Я нашел здесь ответ, который несколько помог, но я у меня все еще есть проблемы. См. Эту ссылку для получения дополнительной информации .
Текущий Javascript / jQuery:
$(document).scroll(function() {
var cutoff = $(window).scrollTop();
var cutoffRange = cutoff + 200;
// Find current section and highlight nav menu
var curSec = $.find('.current');
var curID = $(curSec).attr('id');
var curNav = $.find('a[name='+curID+']');
$(curNav).addClass('active');
$('.section').each(function(){
if ($(this).offset().top > cutoff && $(this).offset().top < cutoffRange) {
$('.section').removeClass('current')
$(this).addClass('current');
return false; // stops the iteration after the first one on screen
}
});
});
Проблема:
Хотя приведенный выше код работает в определенной степени, я столкнулся с одной большой проблемой. У меня проблемы с тем, чтобы целый элемент оставался .current
. Если верхняя часть элемента выходит из окна, он теряет класс. Я исправил это, добавив диапазон для новых элементов, но теперь, когда пользователь прокручивает вверх, предыдущему элементу не присваивается класс .current
, пока верхняя часть элемента не достигнет верха окна. Я бы предпочел, чтобы доминирующая часть окна, когда она была видна, получила класс .current
.
Любая помощь, идеи или предложения будут очень благодарны.
Заранее спасибо!