Responsive & Fixed One Page Nav

Viljami S.
Viljami S. wrote this on

Responsi Fixed One Page Navigation

Today, we are open sourcing the JavaScript code and the assets we used to build the above functionality for our new website. The code and examples are hosted on GitHub and can be found from here. There’s a live example too, under our site, give it a spin. Below is a list of some of the features provided:

Fixed Nav Features

  • Fixed positioned, always visible navigation bar
  • Uses vanilla JavaScript, no jQuery required
  • Smooth animated scrolling
  • Removes 300ms tap delay
  • Adds a mask over the content when navigation is open
  • Auto highlights current location when scrolling the site
  • Uses a tiny custom font for icons (only two characters included)
  • Closes the navigation when user tap’s outside of it
  • Tapping a link changes the URL, so users can still copy/paste it from the address bar and link to different sections
  • Built progressive enhancement in mind
  • Tested to be working in IE6 and up

Fixed Nav on GitHub →

Viljami S.

About the Author

Viljami is the Lead Front-End Designer at Adtile. He’s passionate about responsive design, CSS, JavaScript and web typography, and both tweets and writes actively about these subject. Viljami has been designing web sites for over a decade.

Read all posts by Viljami, and follow Viljami on Twitter.