Inspired by David Walsh’s top navigation bar that gets semi-transparent when you scroll down the page, I decided to create a tutorial out of that idea.

The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.

Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

Ok, let’s start.

via Fixed Fade Out Menu: A CSS and jQuery Tutorial | Codrops.