jQuery plugin that recognizes currently displayed section of the page

Question

I've made a website that is all on one page. I have a fixed header/navigation bar whose links scroll down to the different sections. I am looking for a way to change the styling for the link whose section you're in by adding a .selected class to the appropriate link, but I don't know how to get jQuery to recognize which section(s) is currently displayed on the screen.

I have found a plugin called espy (https://github.com/Darsain/espy) , which I think does the trick, but it is a little too advanced for me to get my head around. Is there a simpler way to do this?

I'm pretty new at development, so I hope I have made clear what am I looking for.

Answer 1

Have a look at this plugin (Viewport Selectors for jQuery).

It adds pseudoselectors you can use to match certain elements. These are:

$(":in-viewport")
$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")

You'll want :below-the-fold and :above-the-top.

Answer 2

This plugin should tell you if the element is in the viewport.

http://imakewebthings.com/jquery-waypoints/

---

From Docu

The simplest way to use Waypoints is to call .waypoint and pass in a function.

$('#example-basic').waypoint(function() {
  notify('Basic example callback triggered.');
});

This example causes a notification whenever the top of #example-basic hits the top of the viewport. The callback triggers when you pass this point both scrolling up and scrolling down.

Answer 3

Here is a parallax tutorial on youtube:

http://www.bing.com/videos/search?q=parallax+jquery+tutorial&mid=4841BC3886A83459796F4841BC3886A83459796F&view=detail&FORM=VIRE3

I find learning complex tech with a video makes it easier for me to grasp.

Also, I found this post here that might shed more light to the subject:

jQuery parallax tutorial?

Hope it gives you some insight.