NavSync


NavSync is an anchor management plugin for jQuery, it progressively enhances traditional anchor behaviour. Instead of instantly snapping to the desired anchor, using NavSync the scroll will be animated. NavSync also facilitates the syncing of anchors to the menu, providing an easy but effective method to create a navigation which aids the user in locating where they're at on the page.

NavSync fills the void between programming this solution yourself, and having to implement a huge framework such as bootstrap just to use the ScrollSpy component. The entire plugin clocks in at under 1kb minified and gzipped.

Features

60FPS - Always

NavSync will hit 60FPS with responsible use of CSS, it has been optimized to only run logic when the animation frame is requested. This is unlike similar plugins, which place all the logic in the scroll event, making the experience sub-par for touch based devices.

Easy Initialization

NavSync does the bulk of the heavy lifting, for example take the following menu structure:

<nav class="main-menu">
  <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>

To initialize NavSync completely with this menu, the javascript required would be:

$(window).load(() => {
  $("nav").navSync();
});

Customization

NavSync has a number of options to take advantage of, for example the following will customize the highlight class used by NavSync,

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

More options can be seen on NavSync's advanced usage section, here.