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.
Demo the buttery smoothness of NavSync at the live demo page!
So far the following is what NavSync supports;
- Synchronizing menus to the content that is currently on screen.
- Custom Animation Time
- Accounting for fixed headers
- Buttery Smooth 60 FPS animation*
Below is what NavSync does not support, but is planned;
- Custom Easing
- Scroll to Anchor on Page Load
*With responsible use of CSS
Loading NavSync - Yes, that's all it takes.
Your HTML structure:
First LinkSecond LinkThird LinkFourth LinkI will be scrolled to!I will be scrolled to!I will be scrolled to!I will not be scrolled to!
Note that link number 4 is a link to an external page, links without an anchor will be ignored.
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 however you see fit.
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.
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.
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.
Some CSS properties will severely affect draw performance, there are a few fixes to these however styling responsibly will always give the best framerate.
Dynamically generated shadows for effects such as CSS box-shadow and text-shadow will redraw each frame, and can severely effect framerate.
Some popular effects involve blurring images or otherwise filtering depending on where the user scrolls to, these effects are also very expensive.
Anything that changes the position of an element will significantly effect framerate, there are two workarounds. Either prerendering your CSS animation, or using the translate transform instead. See the performance difference between using effects like top/left/right/bottom and translate.
If you have an effect which you feel is essential and worth a hit in performance, it can sometimes be compensated for by forcing hardware acceleration. To do this, use the the following css:
Note this cannot be used many times, and doing so will again result in poor performance.