Fix sticky header jumpiness (see: https://github.com/leafo/sticky-kit/wiki/Troubleshooting)

layouts/partials/header.html

@@ -27,9 +27,10 @@
         <section id="body">
         <div id="overlay"></div>
 
-        <div class="padding highlightable">
-
-            <div id="top-bar">
+        <div class="padding highlightable sticky-parent">
+            
+            <div class="sticky-spacer">
+              <div id="top-bar">
               {{ if and .IsPage .Site.Params.editURL }}
                 {{ $File := .File }}
                 {{ $Site := .Site }}
@@ -71,6 +72,7 @@
               {{ if .Params.toc }}
                   {{ partial "toc.html" . }}
               {{ end }}
+            </div>
 
             </div>
             {{ if $isChapter }}

static/js/hugo-learn.js

@@ -56,7 +56,10 @@ images.each(function(index){
 });
 
 // Stick the top to the top of the screen when  scrolling
-$("#top-bar").stick_in_parent({spacer: false});
+$("#top-bar").stick_in_parent( {
+  parent: ".sticky-parent",
+  spacer: ".sticky-spacer",
+});
 
 
 jQuery(document).ready(function() {