您好我正在尝试找出如何让我的粘性导航链接在滚动到达页面上的特定部分时更改滚动颜色。目前我设置它，以便在单击导航链接时，滚动动画将您带到页面上的特定部分，并且还向链接添加活动类（更改为红色）。我只是将其部分滚动到时将活动链接更改为红色。这是我目前的标记。
谢谢
$("#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>
答案 0 :(得分：3)
Update () $(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;
}
答案 1 :(得分：0)
您需要在滚动时检查窗口的当前位置。按位置激活您的链接颜色。 希望你的部分高度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');
}
});
});
答案 2 :(得分：0)
$(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');
}
});
});
这可以解决问题，但我建议将来避免这种编码。您应该制作适用于所有情况的一般功能。例如，在这里，如果再添加一个部分，则还必须更改脚本。
答案 3 :(得分：0)
Please Follow the bellow steps:
**Step1:** Paste the bellow script inside **<body>** tag:
<div class="row">
<div class="container">
<nav class="qodef-main-menu qodef-drop-down qodef-default-nav">
<ul id="menu-main-menu">
<li class="menu-item">
<a href="#" class="nav-item active" id="menu-item-1">First
</a>
</li>
<li class="menu-item">
<a href="#" class="nav-item" id="menu-item-2">Second
</a>
</li>
<li class="menu-item">
<a href="#" class="nav-item" id="menu-item-3">Third
</a>
</li>
<li class="menu-item">
<a href="#" class="nav-item" id="menu-item-4">Fourth
</a>
</li>
<li class="menu-item">
<a href="#" class="nav-item" id="menu-item-5">Fifth
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="container" style="margin-top: 5em;">
<section id="section1" class="section" style="margin: 3em 1em 3em 0;">
<h2>Section 1:</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<pre>
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pre>
</section>
<section id="section2" class="section">
<h2>Section2:</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>
dfadslkf jakl;fjads
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section id="section3" class="section">
<h2>Section3:</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<pre>section3 .... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>
</section>
<section id="section4" class="section">
<h2>section4:</h2>
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section id="section5" class="section">
<h2>Section 5:</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonenter code here
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
</div>
step2: Add the bellow script inside **Head** Tag:
<style type="text/css">
.active {
color: red;
}
ul{
position: fixed;
list-style-type: none;
display: flex;
margin-top: 3em;
padding-top: 2em;
}
ul li{
margin-right: 30px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
step3: Add the bellow script before **</body>** Tag:
<script type="text/javascript">
$( document ).ready(function() { // Tells the function to wait to preform until everything on the page has loaded.
$(window).scroll(function() { // Says this function is preformed continuisly while scrolling.
var Scroll = $(window).scrollTop() + 1, // This variable finds the distance you have scrolled from the top.
SectionOneOffset = $('#section1').offset().top, // This variable finds the distance between #section-one and the top. Replace #section-one with the ID of your section.
SectionTwoOffset = $('#section2').offset().top,
SectionThreeOffset = $('#section3').offset().top,
SectionFourOffset = $('#section4').offset().top,
SectionFiveOffset = $('#section5').offset().top;
// This variable finds the distance between #section-two and the top. Replace #section-two with the ID of your section. You can duplicate this for as many sections as you want.
if (Scroll >= SectionOneOffset) { // If you have scrolled past section one do this.
$("#menu-item-1").addClass("active"); // Adds class of current-menu-item to the menu item with a class of menu-item-1
} else { // If you have not scrolled section one do this.
$("#menu-item-1").removeClass("active"); // Removes class of current-menu-item to the menu item with a class of menu-item-1
}
if (Scroll >= SectionTwoOffset) { // If you have scrolled past section two do this.You can duplicate this for as many sections as you want.
$("#menu-item-2").addClass("active"); // Adds class of current-menu-item to the menu item with a class of menu-item-2
$("#menu-item-1").removeClass("active"); // Removes class of current-menu-item to the menu item with a class of menu-item-1
} else { // If you have not scrolled section two do this.
$("#menu-item-2").removeClass("active"); // Removes class of current-menu-item to the menu item with a class of menu-item-2
}
if (Scroll >= SectionThreeOffset) {
$("#menu-item-3").addClass("active"); // Adds class of current-menu-item to the menu item with a class of menu-item-2
$("#menu-item-1").removeClass("active");
$("#menu-item-2").removeClass("active");
} else{
$("#menu-item-3").removeClass("active");
}
if (Scroll >= SectionFourOffset) {
$("#menu-item-4").addClass("active");
$("#menu-item-1").removeClass("active");
$("#menu-item-2").removeClass("active");
$("#menu-item-3").removeClass("active");
}else{
$("#menu-item-4").removeClass("active");
}
if (Scroll >= SectionFiveOffset) {
$("#menu-item-5").addClass("active");
$("#menu-item-1").removeClass("active");
$("#menu-item-2").removeClass("active");
$("#menu-item-3").removeClass("active");
$("#menu-item-4").removeClass("active");
}else{
$("#menu-item-5").removeClass("active");
}
});
});
that's it, browse the page and scroll to see the results, thanks.