使用jQuery在页面顶部时删除类

Question

我正试图使用jQuery从我的粘性导航中删除一个类。该类是在向下滚动页面并到达某些部分(标记(后添加的。

目前，行为与我编写的代码预期的一样。CSS是在用户滚动具有相应ID的特定部分之后应用的。然而，当用户一直滚动回到顶部时，CSS仍然应用于导航。当用户没有查看导航中的某个部分时，我希望删除这个类。

感谢您的帮助。

// ADDS ACTIVE CLASS TO LINKS IN NAV ON SCROLL
$(document).ready(function() {
$(window).scroll(function() {
var y = $(this).scrollTop();
$('.navLink').each(function(event) {
if (y >= $($(this).attr('href')).offset().top - 40) {
$('.navLink').not(this).removeClass('navLinkActive');
$(this).addClass('navLinkActive');
}
});
});
});
// SMOOTH SCROLLING
jQuery($ => {
// The speed of the scroll in milliseconds
const speed = 1000;
$('a[href*="#"]')
.filter((i, a) => a.getAttribute('href').startsWith('#') || a.href.startsWith(`${location.href}#`))
.unbind('click.smoothScroll')
.bind('click.smoothScroll', event => {
const targetId = event.currentTarget.getAttribute('href').split('#')[1];
const targetElement = document.getElementById(targetId);
if (targetElement) {
event.preventDefault();
$('html, body').animate({
scrollTop: $(targetElement).offset().top
}, speed);
}
});
});

body {
min-height: 300vh;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
z-index: 10;
}
.navLink {
color: #000;
}
.navLinkActive {
color: #FF0000;
}
.section {
height: 50vh;
}
#nonNavSection {
min-height: calc(100vh - 60px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="headerNav" class="sticky">
<a class="navLink" href="#foo">Foo</a>
<a class="navLink" href="#bar">Bar</a>
<a class="navLink" href="#baz">Baz</a>
</nav>
<div id="nonNavSection" class="section"><p>Content unrelated to sections below.</p></div>
<div id="foo" class="section"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div id="bar" class="section"><p>Sit amet consectetur adipiscing elit ut aliquam.</p></div>
<div id="baz" class="section"><p>Leo a diam sollicitudin tempor id eu nisl.</p></div>

Answer 1

我的猜测是，您只需要在滚动处理程序中有一个else子句，可能是这样的：

$(document).ready(function() {
$(window).scroll(function() {
var y = $(this).scrollTop();
$('.navLink').each(function(event) {
if (y >= $($(this).attr('href')).offset().top - 40) {
$('.navLink').not(this).removeClass('navLinkActive');
$(this).addClass('navLinkActive');
} else {
$(this).removeClass('navLinkActive');
}
});
});
});

Answer 2

添加从块else { ... }中的this移除活动类。像这样：

else {
$(this).removeClass("navLinkActive");
}

// ADDS ACTIVE CLASS TO LINKS IN NAV ON SCROLL
$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
$(".navLink").each(function (event) {
if (y >= $($(this).attr("href")).offset().top - 40) {
$(".navLink").not(this).removeClass("navLinkActive");
$(this).addClass("navLinkActive");
} else {
$(this).removeClass("navLinkActive");
}
});
});
});
// SMOOTH SCROLLING
jQuery(($) => {
// The speed of the scroll in milliseconds
const speed = 1000;
$('a[href*="#"]')
.filter((i, a) => a.getAttribute("href").startsWith("#") || a.href.startsWith(`${location.href}#`))
.unbind("click.smoothScroll")
.bind("click.smoothScroll", (event) => {
const targetId = event.currentTarget.getAttribute("href").split("#")[1];
const targetElement = document.getElementById(targetId);
if (targetElement) {
event.preventDefault();
$("html, body").animate(
{
scrollTop: $(targetElement).offset().top,
},
speed
);
}
});
});

body {
min-height: 300vh;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
z-index: 10;
}
.navLink {
color: #000;
}
.navLinkActive {
color: #ff0000;
}
.section {
height: 50vh;
}
#nonNavSection {
min-height: calc(100vh - 60px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="headerNav" class="sticky">
<a class="navLink" href="#foo">Foo</a>
<a class="navLink" href="#bar">Bar</a>
<a class="navLink" href="#baz">Baz</a>
</nav>
<div id="nonNavSection" class="section"><p>Content unrelated to sections below.</p></div>
<div id="foo" class="section"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div id="bar" class="section"><p>Sit amet consectetur adipiscing elit ut aliquam.</p></div>
<div id="baz" class="section"><p>Leo a diam sollicitudin tempor id eu nisl.</p></div>