About
This module is actually two components in one. The first one is a Sticky component that enables an element to scroll along with the page and anchor to the top of it when it encounters the upper edge of the viewport. Alternatively, the element may also be bounded by its parent's bottom edge as well.
The second module is an auto-generating menu. The module will
parse the DOM for data-nav attribues and construct
a menu that may be used to navigate the page.
Demo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Global adoption of mobile services has increased significantly over the last few years. Taking advantage of this ever-growing trend is now more important than ever; however, for our clients, it is merely a stepping stone.
We are very great and super important lorem ispum. We are very great and super important lorem ispum. We are very great and super important lorem ispum. We are very great and super important lorem ispum.
Demo
Useless filler Global adoption of mobile services has increased significantly over the last few years. Taking advantage of this ever-growing trend is now more important than ever; however, for our clients, it is merely a stepping stone.
We are very great and super important lorem ispum. We are very great and
super important lorem ispum. We are very great and super important lorem ispum.
We are very great and super important lorem ispum.
Global adoption of mobile services has increased significantly over the last few years. Taking advantage of this ever-growing trend is now more important than ever; however, for our clients, it is merely a stepping stone.
We are very great and super important lorem ispum. We are very great and super important lorem ispum. We are very great and super important lorem ispum. We are very great and super important lorem ispum.
We are very great and super important lorem ispum. We are very great and super important lorem ispum. We are very great and super important lorem ispum. We are very great and super important lorem ispum.
We are very great and super important lorem ispum. We are very great and super important lorem ispum. We are very great and super important lorem ispum. We are very great and super important lorem ispum.
Demo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Global adoption of mobile services has increased significantly over the last few years. Taking advantage of this ever-growing trend is now more important than ever; however, for our clients, it is merely a stepping stone.
We are very great and super important lorem ispum. We are very great and super important lorem ispum. We are very great and super important lorem ispum. We are very great and super important lorem ispum.
Prereqs
none
Compatibility
- IE8+
- Firefox, Chrome, Opera
Code
new stickyNav({
nav: '#sticky'
});
Options
| Name | type | default | description |
|---|---|---|---|
| nav | String | query selector (string) of the nav container (required) | |
| boundedBy | mixed | parentNode | query selector (string) or HTMLElement of a container to use to "bound" the sticky element within |
| offset | integer | 0 | The offset from the top of the viewport at which to trigger "stickiness". Also affects how (where) the active section is calculated |
| sections | HTMLElement | [data-nav] | HTMLElement nodes to use to generate the menu |