This is the page that will show you how to implement the sticky header script into a site without having to add any additional JavaScript to your build!
- Open the Template Layout code.
- Find the div with the template id
- Add the following to the template div: data-sticky="" data-scroll="30"
data-sticky="" is essential for this script. This data attribute is the tag that the global script reads to attach the event to it for usage!
data-scroll="30" will specify the scroll distance from the top of the page is needed before the "small" class is added to the body tag. So in this case, the default set is 30, resulting in 30 pixels needed as a scroll distance before the class is added. **This can be changed to whatever you like!**
Code Example
Simply grab the code below and replace it with your current template div!
<div id="template" class="essential" data-sticky="" data-scroll="30">
Visual Examples
Before
After
If you need any assistance, please reach out to a developer and they will be happy to help you!