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的最终实例？

我已经嘲笑了这个并且错误仍在发生（导航会在最终section_white div上改变颜色但不会改变第一个颜色）：jsfiddle

由于

Answer 1

根据我的评论，一旦你添加了黑暗类，你的循环就不会结束，所以它会被删除。试试这个（当类被添加到break循环时返回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>

jQuery“.each（）”函数仅将脚本应用于页面上的最后一个类

1 个答案: