Adding Sticky Navigation to a Page

Why Do It

We use this technique to help the user digest a lot of content and still be able to easily navigate around the page to the different subsections.

A sticky nav will work on multiple screen sizes. Here's what it looks like on a Desktop:

Search Engines love this technique as it helps them understand how content on a page is structured and is inter related.

As the user scrolls past the sticky Nav, it stays fixed at the top of the page so that it is easier for the user to navigate around the page.

An example of page is at: https://www.summitbicycles.com/articles/2020-trek-fuel-ex-mountain-bikes-pg528.htm

How to build your Sticky Nav.

1. Open the page in the admin you want to add the Sticky Navigation to.

2. Copy Code (function() { var script = document.createElement("script"); script.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"; document.getElementsByTagName("body")[0].appendChild(script); script.onload = function() { $("#artSticky").sticky({topSpacing:0,zIndex:2000}); $("#artSticky2").sticky({topSpacing:170,zIndex:2000}); }; })();

3. Click on the Pages Settings Tab and Add following JS to the Javascript Tab.
4. Click Save Settings

5. Copy Code

6. Go to Page Settings > Styles
7. Paste in this CSS code
8. Hit Save
9. Drag a custom 1 column html block onto page where you want the Sticky Nav to live.
10. It will ask you what type of content and you should pick wysiwg
11. Click into the new block to edit it and switch to code view by click the icon that looks like:
12. Paste Sticky Nav HTML Code into the section youve've just built.
13. Replace the Divider HTML with the Section HTML Code for each category section.
14. Build rest of page
15. Hit Save, reset Cache.

Buid Sticky NAV HTML

Enter each category that will be the section title on the page. ** Avoid using /(slash) or double quotes **

As you add Category names in the list below the sticky Nav HTML is automatically built in the textarea below.