Have you ever seen a site’s navigation follow you as you scrolled down the page, and update as you continue to scroll down?  If you haven’t  you can see a very simple example at the waypoint’s site or my outcome for my class project plan.  You can also download the waypoints library there.

Ever since I’ve seen so many well made sites utilize this fancy scrolling method, I have wanted to try it myself. I used to have no idea what it was, although I had a few ideas about how to hook into the scrolling event through jQuery.  Luckily for us though, the waypoint library takes care of all the back-end hassle involved in handling scrolling to specific objects.

Another essential library to get the fancy scroll navigation to work is called ScrollTo.js which comes from Ariel Flesler this makes it so that when you click an item in the navigation it smooth scrolls to the item on the page.

I ended up taking a few pointers from an article at WebDesign Tuts+. The article was great and covered the design aspects of a fixed navigation bar, which I used later in my redesign assignment for PhotoShop.

My first attempt at waypoints and scrollto ended up in my Project Plan.  It took a bit of modifying and hacking in to get the waypoints to show up propertly since there were a few problems spots I had with it, as you may see in the tutorial that I had listed earlier.  Another major difference that I gave a try was  keeping the current section in the middle of the screen, this took a bit of simple math to figure out in my custom Javascript but I am really satisfied with the way it turned out; you can keep navigating to the next item without moving your mouse.