How to change nav link color depending on page position
Hi I am trying to work out how to get my sticky navigation links to change color on scroll when they reach their particular section on the page. At the moment I have it set so that when the nav links are clicked a scroll animation takes you to the particular section on the page and also adds an active class to the link (changes to red). I would just to have the active link change to red when its section is scrolled to. This is my current markup.
Thank you
$("#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>You need to check current position of window on scroll. By position activate your link colour. Hoping your section height 440px. You can make it dynamic if you want instead of writing 440px in every if condition.
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');
}
});
});
This will do the trick but I suggest for future to avoid this kind of coding. You should make general functions which work on all the cases. For example, here, if you add one more section you will have to change the script too.
链接地址: http://www.djcxy.com/p/14632.html上一篇: 我如何检查一个元素是否在屏幕上完全可见？
下一篇: 如何根据页面位置更改导航链接颜色