Enable sticky sidebar

- Hide sidebar on small screens

_assets/css/_utilities.scss

@@ -150,10 +150,18 @@ body:hover .visually-hidden button {
    ========================================================================== */
 
 .sticky {
-  @include clearfix();
+  > * {
-  position: -webkit-sticky;
+    display: none;
-  position: sticky;
+  }
-  top: 80px;
+  @include breakpoint($small) {
+    @include clearfix();
+    position: -webkit-sticky;
+    position: sticky;
+    top: 3em;
+    > * {
+      display: block;
+    }
+  }
 }
 
 

_assets/js/_main.js

@@ -13,7 +13,6 @@ $(document).ready(function(){
   // init smooth scroll
   $("a").smoothScroll({offset: -20});
 
-
   // add lightbox class to all image links
   $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']").addClass("image-popup");
 

_layouts/default.html

@@ -35,7 +35,7 @@ layout: compress
   {% endif %}
 
   <div id="main" role="main">
-    <div class="sidebar">
+    <div class="sidebar sticky">
       {% if page.author_profile %}{% include author-profile.html %}{% endif %}
       {% if page.sidebar %}
         {% for s in page.sidebar %}