Add/Remove class 到 header 当超过 class 的部分时

Question

我正在尝试 add/remove class 到粘性 header，当它到达带有 class“dark-section”的特定部分时，但如果有 2 个或更多部分具有相同的 class。

，我想自动执行此操作

jQuery(function ($) {
  
  'use strict';

  var Header    = $('.header');


  function HeaderDarkMode() {
    var scrollTop = $(window).scrollTop(),
        dark = $('.dark-section');

    dark.length && dark.each(function () {
      var top = $(this).position().top,
          height = $(this).outerHeight(),
          bottom = top + height;

      scrollTop >= top - 45 && scrollTop < bottom - 45 ? Header.addClass('dark') : Header.removeClass('dark');


    });
  }

  $(window).scroll(function() {

    HeaderDarkMode();

  });


});

body{
  margin: 0;
  padding: 0;
}
header{
  background: gray;
  opacity: .5;
  min-height: 90px;
  position: sticky;
  top: 0;
  width: 100%
}
header.dark{
  background: red;
}
section{
  min-height: 800px;
}
section.dark-section{
  background: black;:
}

footer{
  min-height: 300px;
  backgroud-color: #f1f1f1;
}

<html>
<head>
    <title>Dark Header Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<header class="header"></header>

<section></section>
<section class="dark-section"></section>
<section></section>
<section class="dark-section"></section>
<section></section>
<section class="dark-section"></section>
  <section></section>

<footer></footer>

</body>
</html>

这是我正在处理的代码，但似乎只适用于最后创建的选择器。

帮助。

Answer 1

您面临的问题是，当您循环遍历代码中的所有 .dark-section 并在 header 中添加或删除 .dark 时，您总是以最后一个结束迭代的结果。如果你在第二个黑暗部分，它会正确地添加 class，但是它必须计算你是否恰好在第三个黑暗部分，你不是因为你只在第二个，所以它再次删除 class 。您需要更改此计算，以便它在匹配时停止，或者您使用标志。由于您的代码使用 jQuery，我会选择后面的选项：

// use a variable to keep track of state
var isOverAnyDarkSection = false
dark.each(function () {
    var top = $(this).position().top,
        height = $(this).outerHeight(),
        bottom = top + height;

    if (scrollTop >= top - 45 && scrollTop < bottom - 45) {
        // set the flag to true the header is over any dark section
        isOverAnyDarkSection = true
    }
});

// finally, only now decide if the class should be added or removed
if (isOverAnyDarkSection) {
    Header.addClass('dark')
} else {
    Header.removeClass('dark')
}

这样，class 只会根据状态添加或删除一次。

Answer 2

代码这样结束

感谢@Jakub-Kotrs

jQuery(function ($) {
        
  'use strict';

  var Header    = $('.header');


  function HeaderDarkMode() {
    var scrollTop = $(window).scrollTop(),
      dark = $('.dark-section');

    // use a variable to keep track of state
    var isOverAnyDarkSection = false
    dark.each(function () {
        var top = $(this).position().top,
            height = $(this).outerHeight(),
            bottom = top + height;

        if (scrollTop >= top - 45 && scrollTop < bottom - 45) {
            // set the flag to true the header is over any dark section
            isOverAnyDarkSection = true
        }
    });

    // finally, only now decide if the class should be added or removed
    if (isOverAnyDarkSection) {
        Header.addClass('dark')
    } else {
        Header.removeClass('dark')
    }
  }

  $(window).scroll(function() {

    HeaderDarkMode();

  });


});

body{
            margin: 0;
            padding: 0;
        }
        .header{
            background: gray;
            opacity: .5;
            min-height: 90px;
            position: sticky;
            top: 0;
            width: 100%
        }
        .header.dark{
            background: red;
        }
        section{
            min-height: 800px;
        }
        .dark-section{
            background: black;:
        }

<html>
<head>
    <title>Dark Header Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<header class="header"></header>

<section></section>
<section class="dark-section"></section>
<section></section>
<section class="dark-section"></section>
<section></section>
<section class="dark-section"></section>
  <section></section>

<footer></footer>

</body>
</html>

Add/Remove class 到 header 当超过 class 的部分时

Add/Remove class to header when is over a section with class

html

jquery

css

each