شما اگر در قالب html خودتون می تونید این کار رو انجام بدید.
<script type="text/javascript" src="/scripts/myscript.js"></script>
قالب رو خودم طراحی نکردم برای تمرین کردن از یه سایت خارجی دانلود کردم. ولی همه قسمت ها که به جاوا اسکریپت و جی کوئری مربوط میشه درست کار میکنه الا همین یه قسمت یه راهنما به زبان انگلیسی پیدا کردم که مشکل رو حل کرده بود ولی متاسفانه من تخصص زیادی در کد نویسی و جاوا و غیره ندارم و در حال تمرین هستم متوجه نشدم کدی که میگه کجا باید کپی کنم؟!
لینک راهنمای انگلیسی:
https://stackoverflow.com/questions/32395988/highlight-menu-item-when-scrolling-down-to-section
// cache the navigation links var $navigationLinks = $('#navigation > ul > li > a');
// cache (in reversed order) the sections
var $sections = $($(".section").get().reverse());
// map each section id to their corresponding navigation link
var sectionIdTonavigationLink ={};
$sections.each(function(){
var id = $(this).attr('id');
sectionIdTonavigationLink[id]= $('#navigation > ul > li > a[href=#'+ id +']');
});
// throttle function, enforces a minimum time interval
function throttle(fn, interval){
var lastCall, timeoutId;
returnfunction(){
var now =newDate().getTime();
if(lastCall && now <(lastCall + interval)){
// if we are inside the interval we wait
clearTimeout(timeoutId);
timeoutId = setTimeout(function(){
lastCall = now;
fn.call();
}, interval -(now - lastCall));
}else{
// otherwise, we directly call the function
lastCall = now;
fn.call();
}
};
}
function highlightNavigation(){
// get the current vertical position of the scroll bar
var scrollPosition = $(window).scrollTop();
// iterate the sections
$sections.each(function(){
var currentSection = $(this);
// get the position of the section
var sectionTop = currentSection.offset().top;
// if the user has scrolled over the top of the section
if(scrollPosition >= sectionTop){
// get the section id
var id = currentSection.attr('id');
// get the corresponding navigation link
var $navigationLink = sectionIdTonavigationLink[id];
// if the link is not active
if(!$navigationLink.hasClass('active')){
// remove .active class from all the links
$navigationLinks.removeClass('active');
// add .active class to the current link
$navigationLink.addClass('active');
}
// we have found our section, so we return false to exit the each loop
returnfalse;
}
});
}
$(window).scroll( throttle(highlightNavigation,100));
// if you don't want to throttle the function use this instead:// $(window).scroll( highlightNavigation );
#navigation {position: fixed;
}
#sections {
position: absolute;
left:150px;
}
.section {
height:200px;
margin:10px;
padding:10px;
border:1px dashed black;
}
#section5 {
height:1000px;
}
.active {
background: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="navigation">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
<li><a href="#section5">Section 5</a></li>
</ul>
</div>
<div id="sections">
<div id="section1" class="section">
I'm section 1
</div>
<div id="section2" class="section">
I'm section 2
</div>
<div id="section3" class="section">
I'm section 3
</div>
<div id="section4" class="section">
I'm section 4
</div>
<div id="section5" class="section">
I'm section 5
</div> </div>
ممنون:لبخندساده: