Mission Briefing

In this project we'll create a sidebar that emulates the position:fixed CSS style but doesn't suffer from the same limitations as a pure CSS solution. We can also add an attractive animation to the page so that when navigation items in the sidebar are clicked, different parts of the page are scrolled into view.

The following is a screenshot that shows the final result of this project:

Why Is It Awesome?

Being able to fix an element in place on the page is an incredibly popular UI design pattern used by many large and popular websites.

Keeping the visitor's main tools or calls-to-action within reach at all times improves the user experience of the site and can help keep your visitors happy. Making things convenient is important, so if a visitor has to scroll down a long page, then scroll all the way up just to click something, they will soon lose interest in the page.

This same principle is also an emerging trend on mobile devices. Actual position:fixed styling has pretty poor...