Enable Stickyfill on screen width > 768px

_assets/css/_archive.scss

@@ -6,6 +6,8 @@
   margin-bottom: 2em;
   @include breakpoint($medium) {
     @include span(10 of 12 last);
+  }
+  @include breakpoint($large) {
     @include suffix(3 of 12);
   }
 }

_assets/css/_page.scss

@@ -5,6 +5,7 @@
 #main {
   @include container;
   @include clearfix;
+  position: relative;
   margin-top: 2em;
   padding-left: 2em;
   padding-right: 2em;
@@ -13,6 +14,8 @@
 .page {
   @include breakpoint($medium) {
     @include span(10 of 12 last);
+  }
+  @include breakpoint($large) {
     padding-right: $right-sidebar-width;
   }
 }
@@ -23,7 +26,6 @@
 }
 
 .page__content {
-  position: relative;
   p, li {
     font-size: 16px;
   }

_assets/css/_toc.scss

@@ -9,15 +9,15 @@
   text-transform: uppercase;
   letter-spacing: 1px;
   background-color: #fff;
-  &.sticky {
+  // &.sticky {
     @include breakpoint($large) {
-      position: fixed;
+      position: absolute;
       top: 0;
       right: calc(50% - 512px + 2em); // 50% - 1/2 of wrapper's max-width + wrapper padding
       width: $right-sidebar-width;
       padding-left: 2em;
     }
-  }
+  // }
 }
 
 .toc__title {

_assets/css/_utilities.scss

@@ -157,10 +157,7 @@ body:hover .visually-hidden button {
    ========================================================================== */
 
 .sticky {
-  > * {
+  @include breakpoint($medium) {
-    display: none;
-  }
-  @include breakpoint($small) {
     @include clearfix();
     position: -webkit-sticky;
     position: sticky;

_assets/js/_main.js

@@ -10,6 +10,27 @@ $(document).ready(function(){
   // init sticky sidebar
   $(".sticky").Stickyfill();
 
+  var stickySideBar = function(){
+    var windowWidth = $(window).width();
+    if (windowWidth > 768) {
+      // fix
+      Stickyfill.rebuild();
+      Stickyfill.init();
+    } else {
+      // unfix
+      Stickyfill.stop();
+    }
+  };
+
+  stickySideBar();
+
+  $(window).resize(function(){
+    stickySideBar();
+  });
+
+
+
+
   // init smooth scroll
   $("a").smoothScroll({offset: -20});
 

_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 %}