<分区>
标签 javascript jquery html css
<分区>
我已经设法在“单击时”更改“事件”类，但不知道如何在“滚动时”进行更改。如何更改滚动条上的“事件”类？此外，页面上链接到页面上不同部分的链接，当我单击页面上的特定部分时，如何将“事件”类添加到相应的“li”元素？
提前致谢。
CSS 样式:
nav.top-nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 1rem 0 1rem 0;
a.top-nav-logo-wrapper {
padding-right: 2rem;
// border: solid red 1px;
img {
width: 25rem;
}
}
ul.top-nav-links {
display: flex;
flex-direction: row;
padding-left: 2rem;
li {
padding-top: .5rem;
transition: .4s;
&::after {
content: "";
display: block;
width: 0;
height: 2.5px;
background: $clr-white;
transition: width .3s;
}
&:hover::after {
width: 100%;
transition: width .3s;
}
a {
font-size: 1.4rem;
color: $clr-white;
text-transform: uppercase;
font-weight: 400;
text-decoration: none;
padding: .5rem;
opacity: .9;
transition: .4s;
&:hover {
opacity: 1;
}
}
&.active-desktop {
opacity: 1;
font-weight: 900;
&::after {
content: "";
display: block;
width: 100%;
height: 2.5px;
background: $clr-white;
transition: width .3s;
}
}
}
}
}
HTML :
<nav id="top-nav" class="top-nav">
<a href="/index.html" class="top-nav-logo-wrapper">
<img src="/imgs/pb-logo/logo.png" alt="Logo">
</a>
<ul class="top-nav-links">
<li><a href="/index.html" class="top-nav-link-1">Home</a></li>
<li class="active-desktop"><a href="#about-section" class="top-nav-link-2">About</a></li>
<li><a href="#pp-section" class="top-nav-link-3">Product Party</a>
</li>
<li><a href="#contact-section" class="top-nav-link-4">Contact</a></li>
</ul>
</nav>
Javascript:
$('li > a').click(function () {
$('li').removeClass();
$(this).parent().addClass('active-desktop');
});
最佳答案
您需要使用滚动事件来检测滚动变化，然后实现更改事件类的逻辑。
我在下面创建了一个 fiddle
https://jsfiddle.net/RohanPatil/pytvn264/1/
enter code here
关于javascript - 如何更改滚动条上的事件类别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56950905/