Используйте jQuery для изменения класса в зависимости от позиции прокрутки

Question

У меня есть одностраничный веб-сайт с фиксированной плавающей навигацией.Я хочу, чтобы можно было выделить, в каком разделе находится пользователь, добавив класс скажем «вкл» к соответствующей навигационной метке.

Этот класс необходимо будет удалить, когда пользователь больше не находится на этомsection и новый текущий раздел должны быть отражены в nav.

Это невозможно сделать с помощью функции щелчка, так как пользователь все еще может просто прокручивать страницу вверх и вниз.Я знаю идею, если это вообще можно сделать или с чего начать, так как мой jQuery ОЧЕНЬ ограничен.

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

Вот моя текущая веб-страница, которая неиметь любую активную навигационную подсветку: http://ec2.dragonstaff.com/www.creativegems.co.uk/

Answer 1

Это похоже на работу с вашим сайтом:

var $sections = $('section');  // all content sections
var $navs = $('nav > ul > li');  // all nav sections

var topsArray = $sections.map(function() {
    return $(this).position().top - 300;  // make array of the tops of content
}).get();                                 //   sections, with some padding to
                                          //   change the class a little sooner
var len = topsArray.length;  // quantity of total sections
var currentIndex = 0;        // current section selected

var getCurrent = function( top ) {   // take the current top position, and see which
    for( var i = 0; i < len; i++ ) {   // index should be displayed
        if( top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1] ) {
            return i;
        }
    }
};

   // on scroll,  call the getCurrent() function above, and see if we are in the
   //    current displayed section. If not, add the "selected" class to the
   //    current nav, and remove it from the previous "selected" nav
$(document).scroll(function(e) {
    var scrollTop = $(this).scrollTop();
    var checkIndex = getCurrent( scrollTop );
    if( checkIndex !== currentIndex ) {
        currentIndex = checkIndex;
        $navs.eq( currentIndex ).addClass("selected").siblings(".selected").removeClass("selected");
    }
});

Answer 2

Просто добавьте это здесь в качестве альтернативы:

Существует плагин jQuery под названием Waypoints . Реализация довольно проста. Пример на их сайте:

$('.thing').waypoint(function(direction) {
    alert('Top of thing hit top of viewport.');
});

Так что, пока вы знаете, как называется элемент, путевые точки будут глупо просты в реализации.

Answer 3

Вы можете получить scrollTop окна с помощью

var scrollTop=$(window).scrollTop();

http://api.jquery.com/scrollTop

Затем вы просматриваете содержимое <div> s и кумулятивно увеличиваете их высоту, пока не получите значение, достаточно близкое к scrollTop. Возможно, вам придется немного поэкспериментировать с тем, как вы справляетесь с перекрытием.

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