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

@Satpal - ID `nav_ham` is the container for the Hamburger menu which is made up of three spans, like so: `

` - it is only used once. — AlexGHooper, Nov 10 '17 at 12:23
Wouldn't it be easier to give your navigation a fixed background of its own and let it appear over the top of the other content so you don't need to mess with colours? — ADyson, Nov 10 '17 at 12:29
@ADyson - in theory yes however the design of the website requires the nav to have no background colour. — AlexGHooper, Nov 10 '17 at 12:32
As you are doing the add Classes in a loop, could some of the loop be adding then when you follow through the loop may then remove some again - not sure why it wouldn't do them all though rather than just leaving the last one. Without an [MCVE] though, we cannot really help much — Pete, Nov 10 '17 at 12:39
@Pete, thanks for your comment - I have mocked it up [here](https://jsfiddle.net/cdr26kwu/) - the error is replicated. — AlexGHooper, Nov 10 '17 at 12:55
It's as I thought, it's beacuse you don't leave the loop so your classes are being removed again: https://jsfiddle.net/cdr26kwu/1/ — Pete, Nov 10 '17 at 12:58
Thank you very much @Pete , this fixed the issue for me - I'm relatively new to JS - how does `return false;` fix the issue? — AlexGHooper, Nov 10 '17 at 13:09
@AlexGHooper the return false breaks the loop so it stops processing the each - https://stackoverflow.com/questions/1784780/how-to-break-out-of-jquery-each-loop, this means that the loop stops from continuing and going back to another white section that does not meet the if (which would then remove the classes). This explains why your black was only working in the last section as no more sections followed so your class remained — Pete, Nov 10 '17 at 13:11

score 2 · Accepted Answer · answered Nov 10 '17 at 13:05

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>

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

1 Answers1