Change color on element more than one time

Question

I'm trying to change the color of an element depending on where you are on the site. I have liked it to one anchor point and it is working. But i want it to change color more than one time. Every time it reaches the anchor point #intro i want it to be white and when it reaches the anchor point #portfolio i want it to go black again. How can i make this work?

This is what i have so far:

function scroll_style() {
   var window_top = $(window).scrollTop();
   var div_top = $('#portfolio').offset().top;

   if (window_top > div_top){
      $('#nav-icon4 span').css({"background":"#000"});

   }
}
$(function() {
    $(window).scroll(scroll_style);
    scroll_style();
});

Answer 1

I'm not understanding the last anchor part, but to get it back to white after scrolling to next point, you have to compare against element bottom position too. And if not true, revert to white.

function scroll_style() {
   var window_top = $(window).scrollTop();
   var $element = $('#portfolio');
   var div_top = $element.offset().top;
   var div_bottom = div_top + $element.outerHeight();
   var $icon = $('#nav-icon4 span');

   if (window_top > div_top && window_top < div_bottom){
      $icon.css({"background":"#000"});
   }
   else{
      $icon.css({"background":"#FFF"});
   }
}
$(function() {
    $(window).scroll(scroll_style);
    scroll_style();
});

Answer 2

That's way more complex than you need. Skip using JS logic and just use the CSS nth-child() Selector or nth-of-type() Selector.