scrolling the web page

scrolling the web page, and when a particular element comes in to view, if there’s an associated navigation item – make it selected. That’s the trick, the hard part is working out exactly which element is now in view.
Fortuantly there’s a jQuery plugin for that particular job that makes it really easy to select only those elements that are in the viewport (as well as outside the viewport): viewport selectors plugin.
It’s not a new plugin by any means, but you need to have a specific reason to want to use it – and it fits this job perfectly.

Solving using the viewport selector plugin

Using the sample page I’ve mocked for this example, if you test a jQuery selector using your favourite debugging tool we can work out which section of the page the user is looking at. For this example, I’m going to say the navigation is linked to the topmost h1 in view (from within the console)

demo : http://jqueryfordesigners.com/demo/scroll-link-nav.html
nice scrolling the web page