CODEWITHSUNDEEP
jquery
ShibinRagh
ShibinRagh

Reputation: 6646

Active Class while page scrolling

Developing a single page (body scroll top animation ) Please check demo first and see add/remove active classes on 'menu li a' http://jsfiddle.net/sUMaa/1/

Everything is fine but single problem Need same active class function while we page scrolling with the mouse

jQuery('ul li a').click(function(){
        var idName = jQuery(this).attr('href');
        var idNameFixTop =  jQuery(idName).offset().top; 
        jQuery('html, body').animate({scrollTop:idNameFixTop}, 1000);

        jQuery('ul li a').removeClass('active');
        jQuery(this).addClass('active');
});

Upvotes: 0

Views: 2839

Answers (2)

knotito
knotito

Reputation: 1392

Either way, you can use twitter bootstrap Scrollspy, works fine :)

Upvotes: 1

saschoar
saschoar

Reputation: 8230

Although I understand your problem, implementing this on your own may raise some tricky questions:

  • How much of the element should be visible before the navigation element is set active
  • What to highlight if more than one element is currently visible

To make your life easier, use something like the jQuery Waypoints plugin. Take a look at the Docs, you can control pretty much everything.

Example for your code:

$('div').waypoint(function() {
  $('ul li a').removeClass('active');
  var currentIndex = $('div').index($(this));
  $('ul li:eq(' + currentIndex + ') a').addClass('active');
},
{
  offset: 'bottom-in-view'
});

Upvotes: 1

Related Questions