javascript - jQuery ".each()"函数仅将脚本应用于页面上的最后一个类

Question

我正在尝试创建一个脚本，如果导航当前悬停在具有浅色/白色背景的页面部分上以保持导航可见，则该脚本会更改导航栏的颜色。

我想更改汉堡菜单的颜色，其布局如下:

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

要更改跨度的颜色，我想添加一个类 ham_dark它执行以下操作:

.ham_dark { background: #000!important;} 

我给白色背景指定了 section_white 类并应用了以下代码:

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

当导航悬停在所有 section_white 上时，控制台正在记录“正在工作”。类，但是它仅将 addClass 应用于最终的 section_white页面上的类，忽略所有其他。

为什么 console.log 在所有类上触发，但仅将 addClass 应用于 section_white 的最终实例？

我已经模拟了这个，但错误仍然发生(nav 在最后一个 section_white div 上改变颜色，但不是第一个): jsfiddle

谢谢

Answer 1

根据我的评论，一旦添加了黑暗类，您的循环就不会结束，因此它会再次被删除。试试这个(当类被添加到中断循环时返回 false):

//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>