Меню навигации Parallax

Question

Это вопрос, основанный на этом вопросе: parallax navigation menu title to show.

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

В настоящее время в примере в предыдущем вопросе он имеет один цвет (синий). Я думал о том, чтобы сделать его прозрачным эффектом для круга или изменить его на другой цвет, чтобы сообщить им, что они находятся в определенном разделе веб-страницы.

Спасибо!

Answer 1

Вы можете использовать функцию прокрутки jQuery для обнаружения, когда один из ваших разделов находится в поле зрения, вот так!

var thisScroll = 0, lastScroll = 0; 
$(window).scroll(function(){ 
    //Detect your current scroll position 
    thisScroll = $(window).scrollTop(); 

    //Loop through each article 
    $('#content article').each(function(){ 

    //Get the element's distance from top of the viewport, including scroll 
    var myPos = $(this).offset().top - thisScroll; 

    //Scrolling down 
    if(thisScroll > lastScroll){ 
     if(myPos > 0 && myPos < $(window).height()){ 
     console.log($(this).attr('id')); 
     } 
    } 
    //Scrolling up 
    else{ 
     if(myPos > -$(window).height() && myPos < 0){ 
     console.log($(this).attr('id')); 
     } 
    } 

    }); 

    //If lastScroll is higher than thisScroll, the user must have scrolled up 
    lastScroll = thisScroll; 
}); 

функции прокрутки просто проверить, если элемент находится в вашем окне просмотра прокрутки вниз (от 0 до высоты экрана). Если вы прокручиваете вверх, сравнения перевернуты, потому что смещение рассчитывается из верхней части вашего элемента - так что вы ищете то, что от 0 до отрицательной высоты вашего видового экрана. Дайте мне знать, если это имеет смысл!