Keep glossary header visible when scrolling

By default, when you view the Glossary, the title and the quick-links to each letter will disappear as you scroll the page.

Default glossary behavior

If you have a lot of glossary terms and you're linking to your glossary in your table of contents or navigation, you may want to keep the Glossary header visible while scrolling.

Sticky glossary header

To add this functionality to your knowledge base, you'll create a snippet to store the code and then add that snippet to the Custom HTML:

1. Go to Library > Snippets.
2. Click the + New Snippet button.
3. Give your snippet a Name (Sticky glossary header, in our example).
4. Give your snippet a Description, like "Make the glossary header "sticky" so it's always visible as people scroll."
5. Click the dropdown next to Snippet Content to select Code Editor.
6. Copy the script below and paste it into the code editor.

   <script>
     $(function(){
       // Adjust the pathname listed below depending on your KB settings. It might be 'help/glossary', '/home/glossary' or '/docs/glossary'
       if(window.location.pathname == '/help/glossary') {
         if($('.ko-content-cntr').length > 0)
           var articleCont = $('.ko-content-cntr');
         else 
           var articleCont = $('.documentation-article');
         var articleWidth = articleCont.width();
         var navTop = $('.hg-header').outerHeight(true);
         var topDiv = $('<div/>', {class: "ko-glossary-topdiv"});
         articleCont.prepend(topDiv);
         topDiv.append($('h1.page-header')).append($('div.glossary-jump-to'));
         var topOfJumpto = topDiv.offset().top;
         var jumptoHeight = topDiv.outerHeight(true);
         topDiv.affix({
           offset: {
             top: topOfJumpto - navTop,
           }
         });
         //add dynamic reusable styles
         $('<style>.ko-glossary-topdiv.affix{top:'+navTop+'px;width:'+articleWidth+'px;background:#fff;}.ko-glossary-topdiv.affix + .glossary-terms-wrapper{margin-top:'+jumptoHeight+'px}</style>').appendTo('head');
       }
     });
   </script>
   
   <style>
     /* Make sure that glossary header doesn't cover content when you jump to a letter */
     .hg-glossary-page a:not([href]) {
       display: block;
       height: 200px;
       margin-top: -200px;
       visibility: hidden;
     }
   </style>

7. The code is used for knowledge bases with /help/ in their URLs. If you are using 'home' or 'docs' instead, you'll need to update the window.location.pathname in line 4 based on your knowledge base's settings to '/home/glossary' or '/docs/glossary'.
8. Click the Create button in the upper right. Here's what a completed snippet might look like:
   Sample sticky glossary header snippet
9. Once it confirms your snippet is created, copy the Merge Code Value ({{snippet.stickyGlossaryHeader}} in our example).
10. Go to Settings > Style.
11. Below the preview pane, click on Custom HTML and select Body from the dropdown.
12. Paste the snippet merge code value into the bottom of the window.
13. Click Save.
    Sample Custom Body HTML with snippet merge code added

Your glossary's header should now stay at the top regardless of how far down your readers scroll.