CODEWITHSUNDEEP
jqueryjsfiddle
Joshc
Joshc

Reputation: 3853

jquery scroll, change navigation active class as the page is scrolling, relative to sections

http://jsfiddle.net/motocomdigital/gUWdJ/


I'm after a jquery scroll technique please that I would like to adapt to my project.

Please see my project example as a fiddle here http://jsfiddle.net/motocomdigital/gUWdJ/

Currently you can see that my nav links automatically animates the scrolling relative to the <section>'s.

My question is, using the $(window).scroll method, how can I add a .active class to my nav a when the sections reach the top of the window?

So for example if the user scrolls down the page (instead of the navigation links), I want the active class to be added relative navigation link. Indicating where you are on the page.

The active class will have to be removed then added every time I'm guessing as the user scrolls down the page.

Also you will have to account for the 28px height of the fixed navigation bar, offset top window.


Can anyone please show me a technique that I can try and use or adapt, or perhaps show me using my jsfiddle :)


Any help would be much appreciated, thanks in advance!


http://jsfiddle.net/motocomdigital/gUWdJ/


enter image description here

Upvotes: 13

Views: 78710

Answers (3)

Jason
Jason

Reputation: 11

I went ahead and modified my script off of A. Wolf because I needed to make sure that my menu items lit up with a negative top difference instead of at 0. This works a lot better than creating a separate function and avoids having to create a click event for each menu item. I would also modify this script to account for the last item in the menu, it should be automatically highlighted if the second to last item is. I suppose mine is very similar but different as I handled my each loop outside of the my main highlight function. The other great thing about my modification is that accounts for having images inside of a link inside of a menu item and accounts for the height of a element and when the bottom of that element hits the top of the page, which is when the highlight should end before a new one does. 

function highlight(item)
{
var itemTop = jQuery(item).position().top;

var windowTop = jQuery(window).scrollTop(); 
var topDifference = (windowTop - itemTop); 

var itemHeight = jQuery(item).height();
var bottomDifference = topDifference - itemHeight; 

var menuId = jQuery('#nav-icons li a').attr('href');
if (menuId = item)
{
    if(topDifference > -1 && bottomDifference < 0)
    {
        jQuery("#nav-icons li a[href='" + item + "']").parent().addClass('active');
        jQuery("#nav-icons li a[href!='" + item + "']").parent().removeClass('active');
    }
    else {
        jQuery("#nav-icons li a[href='" + item + "']").parent().removeClass('active');
    }
}
}
jQuery('#nav-icons li a').each(function(){
var eachAttr = jQuery(this).attr('href');
highlight(eachAttr);
});

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

If you wish a more generic function:

SEE DEMO

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('nav').addClass('fixed');
        $('.wrapper section').each(function(i) {
            if ($(this).position().top <= windscroll - 100) {
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');
            }
        });

    } else {

        $('nav').removeClass('fixed');
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }

}).scroll();​

Upvotes: 45

Jai
Jai

Reputation: 74738

You can do this way: http://jsfiddle.net/gUWdJ/1/

$(window).scroll(function() {

    if ($(this).scrollTop() < $('section[data-anchor="top"]').offset().top) {
       $('nav a').removeClass('active');
    }

    if ($(this).scrollTop() >= $('section[data-anchor="top"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(0)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="news"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(1)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="products"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(2)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="contact"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(3)').addClass('active');
    }

});

Upvotes: 7

Related Questions