Использование jQuery для поиска текущего видимого элемента и обновления навигации

Первый раз здесь. Обычно я могу найти ответы на вопросы, но мне трудно понять это.

Цель:

У меня есть одностраничный макет с боковой панелью навигации, которая при нажатии прокручивает вниз до элемента на страница. Однако, если пользователь просто прокручивает страницу вниз к определенному элементу #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 .

Любая помощь, идеи или предложения будут очень благодарны.

Заранее спасибо!

6
задан Community 23 May 2017 в 10:28
поделиться