gpt4 book ai didi

javascript - 在滚动时使用 JQuery 切换类事件

转载 作者:行者123 更新时间:2023-11-30 09:40:46 25 4
gpt4 key购买 nike

我试图在滚动时切换导航链接中的事件类,这是我的代码:

$(function () {
"use strict";
$(window).on("scroll", function (event) {
var $scrollPos = $(document).scrollTop(),
$links = $('.nav ul li a');
$links.each(function () {
var $currLink = $(this),
$refElement = $($currLink.attr("href"));
if ($refElement.position().top <= $scrollPos && $refElement.position().top + $refElement.height() > $scrollPos) {
$links.removeClass("active");
$currLink.addClass("active");
} else {
$currLink.removeClass("active");
}
});
});
});
.nav {
background-color:#222;
padding:15px 10px;
position:fixed;
top:0;
left:0;
width:100%;
}
.nav ul li {
display:inline;
margin:0 20px;
}
.nav ul li a {
text-decoration:none;
color:#fff;
}
.active {
color:red;
}
#home,#about,#services,#contact {
height:600px;
}
h1 {
text-align:center;
font-size:30px;
padding:100px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li><a href="#home" class="smoothScroll">Home</a></li>
<li><a href="#about" class="smoothScroll">About</a></li>
<li><a href="#services" class="smoothScroll">Services</a></li>
<li><a href="#contact" class="smoothScroll">Contact</a></li>
</ul>
</div>

<div id="home"> <h1>Home</h1> </div>
<div id="about"> <h1>about</h1> </div>
<div id="services"> <h1>services</h1> </div>
<div id="contact"> <h1>contact</h1> </div>

但是出了点问题,它不起作用 - 也许有人可以帮我找出我的问题所在。

最佳答案

使用 .nav ul li a.active 而不是 .active 因为 .nav ul li a 是更特定的风格.active - 请看下面的演示:

$(function () {
"use strict";
$(window).on("scroll", function (event) {
var $scrollPos = $(document).scrollTop(),
$links = $('.nav ul li a');
$links.each(function () {
var $currLink = $(this),
$refElement = $($currLink.attr("href"));
if ($refElement.position().top <= $scrollPos && $refElement.position().top + $refElement.height() > $scrollPos) {
$links.removeClass("active");
$currLink.addClass("active");
} else {
$currLink.removeClass("active");
}
});
});
});
.nav {
background-color:#222;
padding:15px 10px;
position:fixed;
top:0;
left:0;
width:100%;
}
.nav ul li {
display:inline;
margin:0 20px;
}
.nav ul li a {
text-decoration:none;
color:#fff;
}
.nav ul li a.active {
color:red;
}
#home,#about,#services,#contact {
height:600px;
}
h1 {
text-align:center;
font-size:30px;
padding:100px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li><a href="#home" class="smoothScroll">Home</a></li>
<li><a href="#about" class="smoothScroll">About</a></li>
<li><a href="#services" class="smoothScroll">Services</a></li>
<li><a href="#contact" class="smoothScroll">Contact</a></li>
</ul>
</div>

<div id="home"> <h1>Home</h1> </div>
<div id="about"> <h1>about</h1> </div>
<div id="services"> <h1>services</h1> </div>
<div id="contact"> <h1>contact</h1> </div>

关于javascript - 在滚动时使用 JQuery 切换类事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41226797/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com