Sticky table of contents

Author: zackkrida

themes/vocabulary_theme/templates/page-with-toc.html

@@ -85,7 +85,7 @@ <h1>{{ this.title }}</h1>
               </aside>
             {% endif %}
           </div>
-          <div class="row">
+          <div class="row padding-bottom-normal sticky-top">
             <h4 class="b-header">On this page</h4>
             <aside class="menu table-of-contents">
               <ul class="menu-list">

webpack/sass/main.scss

@@ -550,7 +550,7 @@ code {
 
     .project-idea {
       @extend .padding-bottom-xl;
-      
+
       .column {
         @extend .padding-top-normal;
       }
@@ -577,7 +577,7 @@ code {
       @extend .caption;
 
       text-decoration: none;
-    
+
       .icon {
         @extend .padding-right-small;
       }
@@ -593,3 +593,9 @@ code {
     @extend .padding-bottom-xxl;
   }
 }
+
+// Sticky utility function
+.sticky-top {
+  position: sticky;
+  top: 0;
+}