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.
Latest posts by Steven (see all)
Call Now Button

Who Engage Web has helped:

Ice Lolly Minuteman Press BUNZLGS1 UK The Underfloor Heating Store West Cheshire Athletic Club Thomas Cook MWB Business ExchangeWeb Media 360 D2 Architects Beacon Financial Training Steely ProductsBurlydam Garden Centre Asentiv BodyHQ Clever Vine Endeavour Mortgages Pro Networks Comm-Tech Wickers World Ascot Mortgages Top Teks
TEL: 0345 621 4321