jQuery ".each()" function only applying script to last class on page

Question

I'm attempting to create a script that changes the colour of the navigation bar if the nav is currently hovered over a part of the page that has a light/white background to keep the nav visible.

I want to change the colour of the hamburger menu which is laid out like so:

<div id="nav_ham" onclick="openNav()">
    <span class=""></span>
    <span class=""></span>
    <span class=""></span>
    <span class=""></span>
</div> 

To change the colour of the spans, I want to add a class ham_dark which does the following:

.ham_dark { background: #000!important;} 

I've given the white backgrounds a class of section_white and have applied the following code:

//CHANGES COLOR OF NAV ON WHITE SECTIONS
function onScreen() {
    // Check if the top of the page collides with each section
    jQuery('.section_white').each(function() {
        var windowScroll = jQuery(document).scrollTop();
        var navHeight = jQuery('.nav').height();

    // Complex line checks if windowScroll (top of page) + nav bar hits Section Top / Bottom
        if( windowScroll + navHeight >= jQuery(this).offset().top && windowScroll + navHeight <= jQuery(this).offset().top + jQuery(this).height()) {
            // This section is active! Add Highlight
            console.log('working');
            jQuery('#nav_ham span').addClass('ham_dark')
        } else {
            // No - Remove highlight class
            jQuery('#nav_ham span').removeClass('ham_dark')
        }
    });
}

jQuery(window).on('scroll resize', function () {
    onScreen();
});

The console is logging "working" when the nav is hovering over all of the the section_white classes, however it only applies the addClass to the final section_white class on the page, ignoring all others.

Why is it that the console.log is firing on all of the classes but only applying the addClass to the final instance of section_white?

I have mocked this up and the error is still occuring (nav changes colour on final section_white div but not the first): jsfiddle

Thanks

Answer 1

As per my comments, your loop is not ending once you have added the dark class so it is being removed again. Try this (have returned false when class is added to break loop):

//CHANGES COLOR OF NAV ON WHITE SECTIONS
function onScreen() {
  // Check if the top of the page collides with each section
  $('.section_white').each(function() {
    var windowScroll = $(document).scrollTop();
    var navHeight = $('.nav').height();

    // Complex line checks if windowScroll (top of page) + nav bar hits Section Top / Bottom
    if (windowScroll + navHeight >= $(this).offset().top && windowScroll + navHeight <= $(this).offset().top + $(this).height()) {
      // This section is active! Add Highlight
      console.log('working');
      $('.cls-1').addClass('logo_dark');
      $('#nav_ham span').addClass('ham_dark')
      return false; // break loop
    } else {
      // No - Remove highlight class
      $('.cls-1').removeClass('logo_dark');
      $('#nav_ham span').removeClass('ham_dark')
    }

  });
}

$(window).on('scroll resize', function () {
    onScreen();
});

.nav {
  position: fixed;
  height: 10px;
}

.section_black {
  background: black;
  height: 300px;
}

.section_white {
  background: white;
  height: 300px;
}

.ham_dark { background: black!important; }

#nav_ham {
  width: 30px;
  height: 30px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav_ham span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav_ham span:nth-child(1) {
  top: 0px;
}

#nav_ham span:nth-child(2),
#nav_ham span:nth-child(3) {
  top: 8px;
}

#nav_ham span:nth-child(4) {
  top: 16px;
}

#nav_ham.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav_ham.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav_ham.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav_ham.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <div id="nav_ham" onclick="openNav()">
    <span class=""></span>
    <span class=""></span>
    <span class=""></span>
    <span class=""></span></div>
</div>
<div class="section_black">
  BLACK
</div>
<div class="section_white">
  WHITE
</div>
<div class="section_black">
  BLACK
</div>
<div class="section_white">
  WHITE
</div>
<div class="section_black">
  BLACK
</div>
<div class="section_black">
  BLACK
</div>