Buttery Smooth Navigation Management

Getting Started

NavSync is an easy to use jQuery plugin that does the heavylifting for syncing your navigation to your content. All it requires is a semantically built navigation menu and a couple of lines of code, easy as pie.

Don't believe me? The tiny code snippet below is all you need to get started with NavSync!

Javascript
$(window).load(function() {
  $("nav").navSync();
});

The HTML markup required is also extremely simple, see below for an example. Note that NavSync also supports external links, and will only trigger on elements with a valid anchor on the page. Link number 4 will load without problems.

HTML
<nav>
  <a href="#anchor-1">First Link</a>
  <a href="#anchor-2">Second Link</a>
  <a href="#anchor-3">Third Link</a>
  <a href="/example/">Fourth Link</a>
</nav>

Advanced

NavSync has a number of parameters to make use of, for example the ability to tweak with scrolling behaviour, speed of scrolling animations, and the name of the class applied to your header items. These are available to let you customize the behaviour of NavSync to however you see fit.

highlightClass
Example String
$("nav").navSync({hightlightClass : "highlight-menu-item"});

Changes the default class from "navsync-menu-highlight" to "highlight-menu-item". The class is removed once the item has been scrolled past, and reapplied if the user scrolls up.

animationTime
Example Integer
$("nav").navSync({animationTime : 800});

Changes the default animation time for scrolling from 300ms to 800ms, generally scroll speeds of above a second are unwarranted. This should serve as a smell embellishment, not a super funky feature of your website.

ignoreNavHeightScroll
Example Boolean
$("nav").navSync({ignoreNavHeightScroll: true});

By default NavSync will also take into account the height of the header when scrolling to a given anchor, this option can be disabled independently of the former option and is advised if that is the case.

Project

To report bugs, problems, or other inconsistencies you can find the GitHub repo for the project below.

Contact Me

You can contact me via my GitHub page or social media, please do not report bugs through social media.

Download

NavSync is developed using my free time, I don't require a charge but any support is always appreciated. Feel free to buy me a beer :)


GitHub
NPM