Javascript CSS when the user scrolls to an anchor

Question

I have a website http://www.mitchellfinlay.co.uk/newlake/magazines.html

It utilizes a curtain effect, each li element is revealed on scroll or automatically when links are clicked at the top... tempus...talkbusiness etc.

What I would like to do is set the class of the link to 'current' when the user either scrolls to that curtain the link is anchored to.

This needs to happen as the user is scrolling or when the auto scroll has stopped on that page.

Is this achievable?

Jørgen R · Answer 1 · 2012-07-09T15:55:29.570

0

This should iterate over links in the header, remove the class current from each of them, and add it to the clicked link:

$(document).on('click', '#headerLinks a', function() {
    $("#headerlinks a").removeClass("current");
    $(this).addClass("current");
});

As for the scrolling, you can use element.posistion() and window.scrollTop() to figure out what element is on top of the screen. I've made a demo in this fiddle. You'll have to adapt it for your needs, but it shows the basic concept.

edited Jul 09 '12 at 15:55

answered Jul 09 '12 at 15:16

Jørgen R

9,179
7
36
56

You can simply that by simply calling `$("#headerlinks a").removeClass("current")` – jackwanders Jul 09 '12 at 15:18
Thank you. Is there a way of switching the current link when a user scrolls to that anchor point? – finlamit Jul 09 '12 at 15:20

score 0 · Answer 2 · edited Jul 10 '12 at 15:00

0

For your second question on comments:

You can strip anchor with this variable and check what's left behind.

Example:

$('#headerlinks a').click(function(){
   var anchor = document.location.hash;
   if ( anchor === '#myContent1' ) { //this can be href from ur a.
     $('.allContents').hide();
     $('#myContent1').show();
   }
});

edited Jul 10 '12 at 15:00

Alex Schimp

2,295
1
20
35

answered Jul 09 '12 at 15:27

Barlas Apaydin

6,794
10
50
81

Javascript CSS when the user scrolls to an anchor

2 Answers2