如何根据页面位置更改导航链接颜色
嗨，我正在试图找出如何让我的粘滞导航链接在滚动时更改颜色，当他们到达页面上的特定部分。 目前，我已经设置好了，当导航链接被点击时，滚动动画会将您带到页面上的特定部分，并为链接添加一个活动类（更改为红色）。 当它的部分滚动到时，我只想将活动链接更改为红色。 这是我目前的标记。
谢谢
$("#nav-item-1").click(function () {
$('html, body').animate({
scrollTop: $("#section1").offset().top
}, 2000);
});
$("#nav-item-2").click(function () {
$('html, body').animate({
scrollTop: $("#section2").offset().top
}, 2000);
});
$("#nav-item-3").click(function () {
$('html, body').animate({
scrollTop: $("#section3").offset().top
}, 2000);
});
$("#nav-item-4").click(function () {
$('html, body').animate({
scrollTop: $("#section4").offset().top
}, 2000);
});
$("#nav-item-1").click(function () {
$("a").removeClass('active');
$("#nav-item-1").addClass('active');
});
$("#nav-item-2").click(function () {
$("a").removeClass('active');
$("#nav-item-2").addClass('active');
});
$("#nav-item-3").click(function () {
$("a").removeClass('active');
$("#nav-item-3").addClass('active');
});
$("#nav-item-4").click(function () {
$("a").removeClass('active');
$("#nav-item-4").addClass('active');
}); * {
padding: 0;
margin: 0;
}
.active {
color: red;
}
.container {
width: 800px;
}
a {
text-decoration: none;
color: inherit;
}
section {
padding: 200px 0;
width: 100%;
text-align: center;
font-size: 35px;
}
#section1 {
background: #fafafa;
}
#section2 {
background: #e2e2e2;
}
#section3 {
background: #c9c9c9;
}
#section4 {
background: #d4d4d4;
}
nav {
position: fixed;
text-align: center;
width: 100%;
background: black;
padding: 25px 0;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin-right: 40px;
color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<nav>
<ul>
<li><a href="#" id="nav-item-1" class="active">section1</a></li>
<li><a href="#" id="nav-item-2">section2</a></li>
<li><a href="#" id="nav-item-3">section3</a></li>
<li><a href="#" id="nav-item-4">section4</a></li>
</ul>
</nav>
</div>
<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>
<section id="section4">Section 4</section>
$(document).ready(function(){
$(".nav-item").click(function () {
$("a.active").removeClass('active');
$(this).addClass('active');
var active_section = $(this).attr('href'); //get active section id
$('html, body').animate({
//and scroll to the section
scrollTop: $(active_section).offset().top
}, 1000);
});
$(document).scroll(function () {
//get document scroll position
var position = $(document).scrollTop();
//get header height
var header = $('nav').outerHeight();
//check active section
$('.section').each(function(i) {
if($(this).position().top <= (position + header))
{
$("a.active").removeClass('active');
$("a").eq(i).addClass('active');
}
});
});
});
* {
padding: 0;
margin: 0;
}
.active {
color: red;
}
.container {
width: 800px;
}
a {
text-decoration: none;
color: inherit;
}
section {
padding: 200px 0;
width: 100%;
text-align: center;
font-size: 35px;
}
#section1 {
background: #fafafa;
}
#section2 {
background: #e2e2e2;
}
#section3 {
background: #c9c9c9;
}
#section4 {
background: #d4d4d4;
}
nav {
position: fixed;
text-align: center;
width: 100%;
background: black;
padding: 25px 0;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin-right: 40px;
color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<nav>
<ul>
<li><a href="#section1" id="nav-item-1" class="nav-item active">section1</a></li>
<li><a href="#section2" id="nav-item-2" class="nav-item">section2</a></li>
<li><a href="#section3" id="nav-item-3" class="nav-item">section3</a></li>
<li><a href="#section4" id="nav-item-4" class="nav-item">section4</a></li>
</ul>
</nav>
</div>
<section id="section1" class="section">Section 1</section>
<section id="section2" class="section">Section 2</section>
<section id="section3" class="section">Section 3</section>
<section id="section4" class="section">Section 4</section>您需要检查滚动窗口的当前位置。 按位置激活您的链接颜色。 希望你的部分高度为440px。 如果你愿意，你可以让它变成动态的，而不是在每个if条件下写440px。
https://jsfiddle.net/Lsxht5bs/3/
$(document).ready(function(){
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if(scroll < 440){
$("a").removeClass('active');
$("#nav-item-1").addClass('active');
}
else if(scroll > 440 && scroll < 880){
$("a").removeClass('active');
$("#nav-item-2").addClass('active');
}
else if(scroll > 880 && scroll < 1320){
$("a").removeClass('active');
$("#nav-item-3").addClass('active');
}
else if(scroll >= 1320){
$("a").removeClass('active');
$("#nav-item-4").addClass('active');
}
});
});
$(document).ready(function(){
$(window).scroll(function (event) {
var top = $(window).scrollTop();
var divH1 = $('#section1').outerHeight() - $('nav').outerHeight();
var divH2 = divH1;
var divH3 = divH2 + $('#section3').outerHeight();
var divH4 = divH3 + $('#section4').outerHeight();
if(top < divH1){
$("a").removeClass('active');
$("#nav-item-1").addClass('active');
}
if(top >= divH2){
$("a").removeClass('active');
$("#nav-item-2").addClass('active');
}
if(top >= divH3){
$("a").removeClass('active');
$("#nav-item-3").addClass('active');
}
if(top >= divH4){
$("a").removeClass('active');
$("#nav-item-4").addClass('active');
}
});
});
这将做到这一点，但我建议将来避免这种编码。 你应该制定适用于所有情况的一般功能。 例如，在这里，如果您再添加一个节，您将不得不更改脚本。
链接地址: http://www.djcxy.com/p/14631.html上一篇: How to change nav link color depending on page position