我正试图将一个类添加/删除到粘性头中，当它到达带有类的特定部分时"暗区"；，但如果有两个或两个以上的部分属于同一类，我想自动完成。
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>这是我正在编写的代码，但似乎只适用于创建的最后一个选择器。
帮助。
您面临的问题是，当您在代码中的所有.dark-section上循环并在头中添加或删除.dark时，您总是得到最后一次迭代的结果。如果你在第二个黑暗部分，它会正确地添加类，但如果你碰巧在第三个黑暗部分上，它必须计算，而你不是，因为你只在第二部分上，所以它会再次删除类。您需要更改此计算，以便在匹配时停止，或者使用标志。由于您的代码使用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')
}
这样，类只会根据状态添加或删除一次。
代码以这样的结束
感谢@Jakub Koters
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>