Jquery 如何根据页面位置更改导航链接颜色
大家好，我正在尝试解决如何让我的粘性导航链接在到达页面的特定部分时更改滚动条上的颜色。目前，我已经将其设置为，当单击导航链接时，滚动动画会将您带到页面上的特定部分，并向链接添加一个活动类，该链接将变为红色。我只是想有一个活跃的链接更改为红色时，它的部分是滚动到。这是我当前的标记 多谢各位 $nav-item-1.clickfunction{ $'html，body'。设置动画{ scrollTop:$section1.offset.top }, 2000; }; $nav-item-2.单击功能{ $'html，body'。设置动画{ scrollTop:$section2.offset.top }, 2000; }; $nav-item-3.clickfunction{ $'html，body'。设置动画{ scrollTop:$section3.offset.top }, 2000; }; $nav-item-4.clickfunction{ $'html，body'。设置动画{ scrollTop:$section4.offset.top }, 2000; }; $nav-item-1.clickfunction{ $a.removeClass“活动”； $nav-item-1.添加类“活动”； }; $nav-item-2.单击功能{ $a.removeClass“活动”； $nav-item-2.添加类“活动”； }; $nav-item-3.clickfunction{ $a.removeClass“活动”； $nav-item-3.添加类“活动”； }; $nav-item-4.clickfunction{ $a.removeClass“活动”； $nav-item-4.添加类“活动”； }; * { 填充：0； 保证金：0； } .主动{ 颜色：红色； } .集装箱{ 宽度：800px； } a{ 文字装饰：无； 颜色：继承； } 部分{ 填充：200px0； 宽度：100%； 文本对齐：居中； 字体大小：35px； } 第一节{ 背景：fafa； } 第2节{ 背景：E2； } 第三节{ 背景：c9c9c9； } 第四节{ 背景：D4； } 导航{ 位置：固定； 文本对齐：居中； 宽度：100%； 背景：黑色； 填充：25px0； } 导航ul{ 列表样式：无； 文本对齐：居中； } 李国荣{ 显示：内联块； 右边距：40px； 颜色：fff； } 第一节 第二节 第三节Jquery 如何根据页面位置更改导航链接颜色,jquery,html,Jquery,Html,大家好，我正在尝试解决如何让我的粘性导航链接在到达页面的特定部分时更改滚动条上的颜色。目前，我已经将其设置为，当单击导航链接时，滚动动画会将您带到页面上的特定部分，并向链接添加一个活动类，该链接将变为红色。我只是想有一个活跃的链接更改为红色时，它的部分是滚动到。这是我当前的标记 多谢各位 $nav-item-1.clickfunction{ $'html，body'。设置动画{ scrollTop:$section1.offset.top }, 2000; }; $nav-item-2.单击功
第4节您需要检查滚动窗口的当前位置。按位置激活链接颜色。 希望你的节高440px。如果需要，您可以将其动态化，而不是在每个if条件下写入440px
您需要检查滚动窗口的当前位置。按位置激活链接颜色。 希望你的节高440px。如果需要，您可以将其动态化，而不是在每个if条件下写入440px 这会起作用，但我建议以后避免这种编码。您应该创建适用于所有情况的通用函数。例如，在这里，如果您再添加一个部分，您也必须更改脚本 这会起作用，但我建议以后避免这种编码。您应该创建适用于所有情况的通用函数。例如，在这里，如果您再添加一个部分，您也必须更改脚本 $document.readyfunction{ $.nav-item.clickfunction{ $a.active.removeClass'active'； $this.addClass'active'； var active_section=$this.attr'href'；//获取活动节id $'html，body'。设置动画{ //然后滚动到该部分 scrollTop:$active_section.offset.top }, 1000; }; $document.scroll函数{ //获取文档滚动位置 var position=$document.scrollTop； //获取收割台高度 var header=$'nav'.outerHeight； //检查活动部分 $'.section'.eachfunctioni{ 如果$this.position.top $document.readyfunction{ $.nav-item.clickfunction{ $a.active.removeClass'active'； $this.addClass'active'； var active_section=$this.attr'href'；//获取活动节id $'html，body'。设置动画{ //然后滚动到该部分 scrollTop:$active_section.offset.top }, 1000; }; $document.scroll函数{ //获取文档滚动位置 var position=$document.scrollTop； //获取收割台高度 var header=$'nav'.outerHeight； //检查活动部分 $'.section'.eachfunctioni{
如果$this.position.top，这可能就是您要找的：。这可能就是您要找的：。请编辑此内容，使您的说明不属于代码块。我看到了应该是普通文本的内容，其中应该是3个独立的代码块，但这很难确定。您还应该编辑出数百行答案，以便进行编辑这是演示您的问题解决方案所需的最低限度的代码。除上述两条注释外，您的大部分描述文本不是英文的。请编辑此代码，以便您的说明不属于代码的一部分
块我知道什么应该是普通文本，什么应该是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');
}
});
});
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.