jQuery changing css on navigation when div # scrolls into view

Posted by Jonny Wood on Stack Overflow See other posts from Stack Overflow or by Jonny Wood
Published on 2010-05-24T12:14:00Z Indexed on 2010/05/24 13:51 UTC
Read the original article Hit count: 201

Filed under:
|
|

I'm looking to recreate the effect used on this site: http://www.brizk.com/

The site uses one large page that scrolls down. As you scroll down and pass different sections the menu navigation on the left changes css class to "current" as the corresponding div comes into view.

I presume this can be done with jQuery using $(window).height();

I'm fairly new to jQuery and what I want to write is something like this (in laymans terms):

  • Get height of browser window – if div#content1 is 100px from top and/or 200px from bottom change menu a#link1 to '.current' – else remove .current from all menu a links

... and repeat for 4 different content divs.

Can anyone point me in the right direction..? Thanks.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about css