jQuery offset () или position () - изменяет свойства элемента, когда он близко к другому элементу

Question

Я хочу, чтобы навигационная панель установила position: fixed в верхней части моего окна со ссылками, которые плавно прокручивают к различным разделам.

У меня гладкие прокручивающиеся части работают нормально.Далее я хочу изменить цвет панели навигации по мере ее прокрутки вниз по экрану.Я хотел бы, чтобы вещи переключались / анимировались примерно так:

При прокрутке вниз до Section2 = Animate до желтой Navbar.добиться этого эффекта с помощью метода click (когда кликните на # section2, измените CSS), но как мне заставить его измениться, если пользователи прокрутят экран вниз - без использования ссылок в навигационной панели?Где я дошел до сих пор: http://jsfiddle.net/saltcod/4xkbs/2/

Спасибо!

Терри

Answer 1

Вы можете обработать событие прокрутки, а затем в своем обработчике событий получить смещение для секций, чтобы увидеть, находится ли координата y в списке навигации или выше.Что-то вроде:

$(window).scroll(function() {
    var bottom = $("#navcontainer").offset().top + $("#navcontainer").offset().height();
    if ($("#section3").offset().top <= bottom) {
        // Scrolled to or beyond section 3
    }
    else if ($("#section2").offset().top <= bottom) {
        // Scrolled to or beyond section 2, but not to section 3
    }
}

Привязка к $ (window) .scroll в jsFiddle не работает, поэтому я не проверял этот код.