0%

Rain

0%

Fog

None

Snow

captcha

TEL: 0845 621 4321

clear

clear

London, Uk

Stick to the waypoints

Posted on July 27, 2013

There seems to be more sites out there that have a neat little feature called ‘sticky navigation’. I guess you know what I am talking about – it’s where the header navigation sticks to the top of your screen as you scroll down. This makes it easier for you to navigate around the site without having to scroll back up to the navigation pane.

This can be accomplished in many ways, but the implementation I prefer at the moment is using a jQuery plugin called ‘Waypoints‘. This handy little library lets you set waypoints in your code via Divs. Once that Div hits the top of the page the action is fired, sticking whatever menu you choose to the top. It’s simple to use and has a lot of useful features such as offset, meaning your can stack your menus and gather them at the top of the page as the viewer scrolls down.

With some additions, jQuery can be transformed into a powerful navigation tool, and even an area to preview some of the things the user has clicked on before it takes them there. It reminds me of the old sit remotes that used to be fixed positioned on a lot of older websites. The idea was good, but the implementation was hideous – it would often distract from the site or not be updated. This provides a more natural solution to the issue of lost navigation and opens up a new space for innovation and ideas.

For all the more technically minded readers here’s the GitHub address

Steven is Engage Web’s go-to man for all things web-related, bringing his knowledge of current trends in web design and development to the team.

Twitter LinkedIn Google+ 

Posted by Steven

We have worked with:

TEL: 0845 621 4321