We’re pleased to introduce a new ZK Addon – Anchornav.
This component synchronizes the scrolling position on a page or within ZK containers (Div, Window, etc.) with hyperlinks and buttons. It allows you both to navigate to desired ZK components in a page and highlight the current navigation link based on the current scroll position.
This video demonstrates how the Anchornav component activates a specific link when scrolling to the corresponding section of the page. In reverse, a corresponding component is scrolled into view when the link is clicked.
- ZK CE: 8.0.0 or later
- ZK PE and EE: (Optional)
<a ca:data-anchornav-target="$win1"> First Window </a>
<a ca:data-anchornav-target="$win2"> Second Window </a>
<window id="win1" title="1. First Window">
<window id="win2" title="2. Second Window">
Welcome to ZK world.
By default, the Anchornav component will watch the scroll position of a page.
Other scrollable containers can be associated with a named Anchornav by setting the client-attribute:
<!-- other components -->
A or Button components can be used as links and targets are specified by the ZK client-attribute
For example, in Line 3 and Line 4,
$win1 / $win2 select widgets by zk component id,
win1 / win2.
The JQuery-based selector syntax (
#domId / .class / elementName) is extended by ZK specific selectors as seen above using
As of now Anchornav supports the following properties:
- setName(String name)
Set the name of Anchornav, it is only required when we want to spy scrolling in ZK containers instead of the whole page scrollbar.
- setPositionFixed(Boolean positionFixed)
Set whether to enable position fixed when anchornav is out of current view. When it is set to true, Anchornav will stay (float) on the same position of the page. (Default: true)
In order to layout your navigation links you can use arbitrary ZK components, such as vlayout, Window…
<a ca:data-anchornav-target="..."> ... </a>
<button ca:data-anchornav-target="..."> ... </button>
An active link will receive the css class –
z-anchornav-link-active – available for custom styling:
I hope you find this component interesting. Please let us know how you like it!
This component is currently in its Beta. If you are interested in using this component please contact us at email@example.com.
The runnable demo project is available on Github.