Переключить класс при прокрутке по определенному разделу.

Question

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

Я издевался вверх codepen, чтобы попытаться прояснить http://codepen.io/jphogan/pen/aOMjzE

Я использую следующий код, чтобы установить высоту контейнера и вызвать прокрутку на мыши к нужному разделу. Я использую jQuery и jQuery UI.

var fixedHeight = $(".navWrapper").outerHeight(true); 
$(".navWrapper").css("height", fixedHeight + "px"); 
var innerMenuHeight = $(".navWrapperInner").outerHeight(true); 

var anchors = $(".sectionAnchor"); 
var disableChange = false; 
var menuHeight; 

$(".pageScroller").on("click", function() { 
    disableChange=true; 
    $("a.pageScroller").removeClass("active"); // remove class from all nav links 
    $(this).addClass("active"); // add to active link 
    $('html,body').animate({scrollTop: ($("." + $(this).data("scrollto")).offset().top)-innerMenuHeight-17},1000,"easeInOutSine"); // scroll to section 
    window.setTimeout(function(){disableChange=false;},480); 
    return false; 
}); 

Answer 1

Попробуйте что-то вроде:

var document = $(document); 
var sections = [...]; 

// when user scrolls 
document.scroll(function() { 
    var 
     sy = document.scrollTop() // get scroll y 
    , h = $(window).height() 
    ; 

    var bottom = null; 
    $(sections).each(function (section) { 
     var sectionY = getSectionAbsoluteY(section); // absolute Y position of section 
     if (sectionY < sy + h) // check if bottom-most visible 
      bottom = section; 
    }); 

    $(sections).each(...); // unhighlight 
    if (bottom) 
     $(bottom) ... // highlight 
});