Highlight selected navigation item (anchor link same page)

[juliane]

Hi, i’m trying to highlight the selected navigation item based on links within the same page. Here’s what i did so far: http://jsfiddle.net/4D3bH/ . But now, I can’t seem to make the highlight work..

Would appreciate any help!

Thank you.

[joshuanhibbert]

Here you go: http://jsfiddle.net/joshnh/YxRqp/

[Senff]

http://jsfiddle.net/senff/4D3bH/3/

[Senff]

…or what @joshuanhibbert said. ;)

[juliane]

thank you! it worked and i applied the active on the first nav item so that when the page opens it’s already selected.

now, i’m trying to make it active based on where I’m on the page using the mouse-scroll. because, if I scroll with the mouse down or up, the last nav that i clicked is still selected. no matter section i’m on. i want to achieve something like http://nikebetterworld.com/about or http://www.neotokio.it/. any ideas?

[joshuanhibbert]

Ah, you are after this: http://imakewebthings.com/jquery-waypoints/

[juliane]

wow, yes! you’re fast.. thank you, joshua! :)

[joshuanhibbert]

No worries :)

[yabadabadoo]

Hey guys. This is exactly what I am looking for. I tried hardly to test it on my computer but it doesn’t seem to work.

What I might be doing wrong? I added jquery-1.3.2.min.js
I don’t see the scrolling fx (not bodering about it) and the ‘active’ class change doesn’t work on my pc :(

Thanks a lot in advance.

[AlexD]

Hi Juliane

I am creating a site very similar to your fiddle. I realise now I need waypoints to get it to work the same as you needed it to. Could you please create a fiddle of it working with waypoints.

Would be appreciated :)

[InfinityMax]

Waypoints is awesome. Really helped me out on the thing I’m doing now. I was able to get it to apply the active state to my anchor tags based on what was at the top of the page… but then I broke it. When I apply overflow:hidden to the container div, Waypoints will one fire once, when the page is loaded.

Here’s the code I wrote to make the Waypoints work:

$(document).ready(function(){
// Make navbtn active when page is scrolled down to slide
$(‘#slide1’).waypoint(function(down){
$(‘#main .active’).removeClass(‘active’); // remove the class from the currently selected
$(‘#main a.navbtn1’).addClass(‘active’); // add the class to the newly clicked link
});

$(‘#slide2’).waypoint(function(down){
$(‘#main .active’).removeClass(‘active’); // remove the class from the currently selected
$(‘#main a.navbtn2’).addClass(‘active’); // add the class to the newly clicked link
});

$(‘#slide3’).waypoint(function(down){
$(‘#main .active’).removeClass(‘active’); // remove the class from the currently selected
$(‘#main a.navbtn3’).addClass(‘active’); // add the class to the newly clicked link
});
});
$(document).ready(function(){
// Make navbtn active when page is scrolled up to slide
$(‘#slide1’).waypoint(function(up){
$(‘#main .active’).removeClass(‘active’); // remove the class from the currently selected
$(‘#main a.navbtn1’).addClass(‘active’); // add the class to the newly clicked link
}, {offset: -1});

$(‘#slide2’).waypoint(function(up){
$(‘#main .active’).removeClass(‘active’); // remove the class from the currently selected
$(‘#main a.navbtn2’).addClass(‘active’); // add the class to the newly clicked link
}, {offset: -1});

$(‘#slide3’).waypoint(function(up){
$(‘#main .active’).removeClass(‘active’); // remove the class from the currently selected
$(‘#main a.navbtn3’).addClass(‘active’); // add the class to the newly clicked link
}, {offset: -1});
});

I would love to know why overflow:hidden is keeping this from working. It should still be firing off when I get #slide2 or #slide3 hits the top of the viewport, but it’s not, and I can’t see why.

EDIT:

Here’s a jsfiddle with the HTML and CSS.

[eppel]

Hello,

How would I add easing to

Senff

http://jsfiddle.net/senff/4D3bH/3/

thank you

[Author]

Posts