Refactor: implement sticky TOC using CSS instead of JS

Author: lorenzpahl

_includes/footer.html

@@ -48,7 +48,6 @@
 <script src="{{ site.baseurl }}/resources/js/vendor/codemirror/clike.js" type="text/javascript"></script>
 
 <!-- TOC -->
-<script src="{{ site.baseurl }}/resources/js/vendor/jquery.sticky.js" type="text/javascript"></script>
 <script src="{{ site.baseurl }}/resources/js/vendor/toc.js" type="text/javascript"></script>
 
 <!-- Blog search -->

_sass/layout/toc.scss

@@ -3,6 +3,14 @@
 //------------------------------------------------
 
 .sidebar-toc-wrapper {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+
+  @include bp(large) {
+    position: relative;
+  }
+
   @include bp(medium) {
     display: none;
   }

resources/js/functions.js

@@ -304,27 +304,9 @@ $(document).ready(function() {
       autoId: true,
       numerate: false
     });
-    toggleStickyToc();
   }
 });
 
-$(window).resize(function() {
-  toggleStickyToc();
-});
-
-var toggleStickyToc = function() {
-  if ($("#sidebar-toc").length) {
-    if ($(window).width() <= 992) {
-      $(".sidebar-toc-wrapper").unstick();
-    } else {
-      $(".sidebar-toc-wrapper").sticky({
-        topSpacing: 0,
-        bottomSpacing: 500
-      });
-    }
-  }
-}
-
 // Language dropdown
 function DropDown(el) {
   this.dd = el;