Keep glossary header visible when scrolling

Here is some code to keep your glossary header visible when scrolling.


Copy and paste this script into the bottom of Settings > Style > Custom HTML > Body. This script will keep the Glossary header and letters visible as you scroll.

<script>
$(function(){

//only on 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>

Copy and paste this CSS into Settings > Style > Custom CSS to make sure the sections are visible when you click are the links to jump to a section. Without this CSS the letter you jump to might get covered by the header.

.hg-glossary-page a:not([href]) {
display: block;
height: 200px;
margin-top: -200px;
visibility: hidden;
}