Responsive & Fixed One Page Nav

Adtile Technologies
Adtile Technologies wrote this on

Responsive 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 →

Adtile Technologies

About the Author

Adtile is a pioneer and developer of motion-sensing technology for smartphones and tablets. We are working with leading technology companies and Fortune 500 brands.

Read all posts by Adtile.

Follow us on Twitter