Sample data section
How to change active class of the navbar on scroll
Tech Blog
active class on scroll
jQuery
Javascript
Sample Code
add active class on scroll
: King Subash : 09th April 2021
The best way to add active class on scroll is by using "Window Scroll Method". I have used some of the jQuery function to achieve that, It's very simple and effective. I have used HTML, CSS, jQuery to achieve that.
Sample Html Code
<section id="menu1">Home Menu Data</section> <section id="menu2">Tech Blog Menu Data</section> <section id="menu3">Travel Blog Menu Data</section> <section id="menu4">About Menu Data</section> <section id="menu5">Contact Menu Data</section>
Sample CSS Code (Optional)
<style>section{height:300px;border-top:1px solid green;}</style>
Sample jQuery Code
var menu1 = $('#menu1').offset().top-380;//section height + nabvar height + main div padding (Optional)
var menu2 = $('#menu2').offset().top-380;//section height + nabvar height + main div padding (Optional)
var menu3 = $('#menu3').offset().top-380;//section height + nabvar height + main div padding (Optional)
var menu4 = $('#menu4').offset().top-380;//section height + nabvar height + main div padding (Optional)
var menu5 = $('#menu5').offset().top-380;//section height + nabvar height + main div padding (Optional)
$(window).scroll(function(){
var _wscoll = $(window).scrollTop();
console.log(_wscoll+' '+menu1);
if ( _wscoll >= menu1 && _wscoll < menu2 ) {
$('#mainMenu li:nth-child(1)').addClass('active');
$('#mainMenu li:nth-child(2), #mainMenu li:nth-child(3), #mainMenu li:nth-child(4), #mainMenu li:nth-child(5)').removeClass('active');
} else if ( _wscoll >= menu2 && _wscoll < menu3 ) {
$('#mainMenu li:nth-child(2)').addClass('active');
$('#mainMenu li:nth-child(1), #mainMenu li:nth-child(3), #mainMenu li:nth-child(4), #mainMenu li:nth-child(5)').removeClass('active');
} else if ( _wscoll >= menu3 && _wscoll < menu4 ) {
$('#mainMenu li:nth-child(3)').addClass('active');
$('#mainMenu li:nth-child(1), #mainMenu li:nth-child(2), #mainMenu li:nth-child(4), #mainMenu li:nth-child(5)').removeClass('active');
} else if ( _wscoll >= menu4 && _wscoll < menu5 ) {
$('#mainMenu li:nth-child(4)').addClass('active');
$('#mainMenu li:nth-child(1), #mainMenu li:nth-child(2), #mainMenu li:nth-child(3), #mainMenu li:nth-child(5)').removeClass('active');
} else if ( _wscoll >= menu5 ) {
$('#mainMenu li:nth-child(5)').addClass('active');
$('#mainMenu li:nth-child(1), #mainMenu li:nth-child(2), #mainMenu li:nth-child(3), #mainMenu li:nth-child(4)').removeClass('active');
} else {
$('#mainMenu li:nth-child(1), #mainMenu li:nth-child(2), #mainMenu li:nth-child(3), #mainMenu li:nth-child(4), #mainMenu li:nth-child(5)').removeClass('active');
}
});
Conclusion
What do you think about this simple preloader transition? Let me know
About Author
King Subash
I am a Full Stack Web Developer. 10 Years 7 Months of work experience in web development with a Master's Degree in Computer Application (MCA). Hands-on experience on HTML, CSS, PHP, MySQL, Codeigniter, javascript, React JS, jquery, ajax, JSON, LAMP administration, twitter Boostrap, Material CSS, Materializecss. Strong knowledge of Web application and Web servers.
