Sticky Anchor Navigation

The responsive tab navigation is used to allow the vistor to smooth scroll to the various sections of a long page or a one page website.
The tabs can be styled using web safe or non websafe fonts with a fallback. There are controls to adjust font size, color and hover color, background color, padding and to add a border and border radius. There are settings for minimum width and spacing.

The navigation can be set up to operate in two different ways…
Scroll & Fix
In this mode, the navigation appears at a preset distance from the top of the browser window on page load. On scroll, the navigation moves up and then sticks at a preset distance from the top of the browser - in this case at 10px.
Fade In On Scroll
When this is selected, the navigation is hidden on page load. It appears after a preset amount of scroll and then fixes itself at a set distance from the top of the browser window. This mode is more useful for mobile and one page websites.
Anchor Targets
In this demo, the hidden anchors are placed about 50px above the section headings so that the headings will appear just below the navigation tabs on scrolling down to the section.
NOTE: This widget is not suitable for use with iPad or iPhone due to a bug in iOS.