Fixed positioning positions elements relative to the browser window itself instead of the page so when the page is scrolled down, the fixed element stays right where it is. This technique is often used on blogs where the pages are much longer. Creating a fixed position menu will keep the navigation near the viewer at all times to eliminate the inconvenience of scrolling all the way back up to find the navigation.
When using a fixed position navigation for your site, you must realize that not everyone’s browser height is going to be the same. Sometimes when the fixed navigation is too long for a browser, some of it will be cut off making it impossible for those viewers to reach parts of your navigation.
Here are some beautiful examples of fixed position navigation along with some tutorials on how to achieve this if you don’t know how to already.
This blog uses fixed position menus for each different blog post, which starts sticking as you scroll with the post and stops sticking when you scroll past onto the next post. It is a great way to ensure that as readers scroll down to read a longer post, they can always see extra information about that certain post.
This personal blog of Julius Mattson uses a beautiful fixed menu that blends in great with the style of the website. When the website is opened, it automatically smooth scrolls to the top of the first post which shows off the functionality of the fixed menu.
This circus styled portfolio uses a fixed menu that shows the major parts of this website, mainly the portfolio and the blog. It incorporates animated transitions between the different sections when clicked and smooth scrolls to the destination which gives the website a very slick and fluid feel.
This recent redesign of WebDesignerWall incorporates a beautiful fixed position menu. It contains all the important information including social media, navigation and a search bar. Everything is beautifully animated like the search bar that extends when you select it.
Sohtanaka uses fixed position in two instances. On the portfolio the different sections are shown in a fixed menu with changing testimonials of their work below them. Their blog posts also use fixed position to show social media options.
The fixed navigation keeps the reader always reminded what blog they’re on. It also has a nice faded gradient that gives the content underneath the blog logo a nice smooth fade when the reader scrolls down.