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

    Latest posts by Steven (see all)

    Like us on Facebook to see more posts like this

    %d bloggers like this:

    We have worked with:

    TEL: 0345 621 4321