Fix stuck sidebar when resizing viewport

Close mmistakes#1447
sumeetmondal · Jan 3, 2018 · aed8d99 · aed8d99
1 parent 9d31fbc
commit aed8d99
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss
@@ -9,21 +9,21 @@
 .sidebar {
   @include clearfix();
   margin-bottom: 1em;
-  -webkit-transform: translate3d(0, 0 , 0);
-          transform: translate3d(0, 0 , 0);
 
   @include breakpoint(max-width $large) {
     /* fix z-index order of follow links */
     position: relative;
     z-index: 10;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 
   @include breakpoint($large) {
     float: left;
     width: calc(#{$right-sidebar-width-narrow} - 1em);
     opacity: 0.75;
     -webkit-transition: opacity 0.2s ease-in-out;
-            transition: opacity 0.2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
 
     &:hover {
       opacity: 1;
@@ -32,20 +32,27 @@
     &.sticky {
       overflow-y: auto;
       /* calculate height of nav list */
-      height: calc(100vh - 90px - 2em); // viewport height - approx. masthead height - main content top margin
+      height: calc(
+        100vh - 90px - 2em
+      ); // viewport height - approx. masthead height - main content top margin
     }
   }
 
   @include breakpoint($x-large) {
     width: calc(#{$right-sidebar-width} - 1em);
   }
 
-  h2, h3, h4, h5, h6 {
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     margin-bottom: 0;
     font-family: $sans-serif-narrow;
   }
 
-  p, li {
+  p,
+  li {
     font-family: $sans-serif;
     font-size: $type-size-6;
     line-height: 1.5;
@@ -76,7 +83,6 @@
 }
 
 .splash .sidebar__right {
-
   @include breakpoint($large) {
     position: relative;
     float: right;
@@ -265,4 +271,4 @@
       text-decoration: underline;
     }
   }
-}
+}
diff --git a/assets/js/_main.js b/assets/js/_main.js
@@ -24,6 +24,27 @@ $(document).ready(function() {
   // FitVids init
   $("#main").fitVids();
 
+  // Sticky sidebar
+  var stickySideBar = function() {
+    var show =
+      $(".author__urls-wrapper button").length === 0
+        ? $(window).width() > 1024 // width should match $large Sass variable
+        : !$(".author__urls-wrapper button").is(":visible");
+    if (show) {
+      // fix
+      $(".sidebar").addClass("sticky");
+    } else {
+      // unfix
+      $(".sidebar").removeClass("sticky");
+    }
+  };
+
+  stickySideBar();
+
+  $(window).resize(function() {
+    stickySideBar();
+  });
+
   // Follow menu drop down
   $(".author__urls-wrapper button").on("click", function() {
     $(".author__urls").toggleClass("is--visible");