I have designed a Parallax Page with Sticky Menu bar. I need to change the active menu on scrolling. I have made it to change the active class on Click event. But I need it to do for the scroll event.
Here is my HTML Code
<div class="main-menu">
<ul>
<li><a class="active" href="#" data-delay="2000" data-appear="false" data-scrollto="#intro-slideshow">Home</a></li>
<li><a href="#" data-delay="2000" data-appear="false" data-scrollto="#overview">Features</a></li>
<li><a href="#" data-delay="2000" data-appear="false" data-scrollto="#categories">Categories</a></li>
<li><a href="#" data-delay="2000" data-appear="false" data-scrollto="#contact">Contact Us</a></li>
</ul>
</div>
Here is my JQuery Code for Onclick Active Menu Changer
$('*[data-scrollto]').click(function(){
$( "a" ).removeClass( "active" );
$(this).addClass("active");
var dest = $(this).data('scrollto');
var pixels = $(dest).offset().top - 70;
var ms = Math.round(1000 + pixels/5);
$('html, body').animate({
scrollTop: pixels
}, ms, 'easeOutQuint');
});
How do I change the active class on Scroll Event with the Data-Scrollto attribute ?
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire