Parallax navigation menu

Question

This is the question based on this question : parallax navigation menu title to show.

So I was able to make it to show the title of the menu, but I was wondering is there anyway I can change css to make the difference of the menu when the person is on the specific title section.

Currently in the example in previous question, it has one color(which is blue). I was thinking about make it transparent effect to the circle, or change into different color to let them know they are in the specific section of the webpage.

Thanks!

Answer 1

You can use a jQuery scroll function to detect when one of your sections is in view, like this!

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;
});

The scroll functions are just checking if the element is within your viewport scrolling down (between 0 and the height of your screen). If you're scrolling up, the comparisons are flipped because the offset is calculated from the top of your element - so you're looking for whichever is between 0 and negative your viewport height. Let me know if that makes sense!