From 90300231d4bafd35f120baede06024d2dddd5e0c Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Thu, 16 Feb 2017 18:59:13 -0500
Subject: [PATCH 1/2] [fix] Allowing the sidebar to be scrollable

Allowing the sidebar component to be scrollable when
its fixed and has outgrown the current available height
it has to occupy.
---
 components/sidebar/sidebar.jsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/sidebar/sidebar.jsx b/components/sidebar/sidebar.jsx
index a673109be46d..708c061300c3 100644
--- a/components/sidebar/sidebar.jsx
+++ b/components/sidebar/sidebar.jsx
@@ -7,14 +7,14 @@ export default class Sidebar extends Component {
 
     this.state = {
       fixed: false,
-      extraHeight: null,
+      availableHeight: null,
       maxWidth: null
     };
   }
 
   render() {
     let { sectionName, pages, currentPage } = this.props;
-    let { fixed, extraHeight, maxWidth } = this.state;
+    let { fixed, availableHeight, maxWidth } = this.state;
     let isGuides = sectionName === 'guides';
 
     return (
@@ -23,9 +23,9 @@ export default class Sidebar extends Component {
         ref={ ref => this._container = ref }
         style={ fixed ? {
           position: 'fixed',
-          top: -extraHeight,
+          top: 0,
           width: maxWidth,
-          maxHeight: 'none'
+          maxHeight: availableHeight
         } : null }>
 
         <div className="sidebar__inner">
@@ -81,11 +81,10 @@ export default class Sidebar extends Component {
     let headerHeight = document.querySelector('header').offsetHeight;
     let footerHeight = document.querySelector('footer').offsetHeight;
     let distToBottom = scrollHeight - scrollY - innerHeight;
-    let availableSpace = innerHeight + distToBottom - footerHeight;
     
     this.setState({ 
       fixed: scrollY >= headerHeight && sidebarHeight < parentHeight,
-      extraHeight: sidebarHeight > availableSpace ? sidebarHeight - availableSpace : 0,
+      availableHeight: distToBottom > footerHeight ? innerHeight : innerHeight - footerHeight + distToBottom,
       maxWidth: parentWidth
     });
   }

From 798931aebe6ddd96bc0ed08e0e486b2f41d92a9c Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Tue, 21 Feb 2017 22:36:03 -0500
Subject: [PATCH 2/2] Fix snap-to-top behavior by always setting max-height

Always set max-height and calculate the space the header is occupying
into the equation for `availableHeight` as well.
---
 components/sidebar/sidebar.jsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/components/sidebar/sidebar.jsx b/components/sidebar/sidebar.jsx
index 708c061300c3..b773698a3464 100644
--- a/components/sidebar/sidebar.jsx
+++ b/components/sidebar/sidebar.jsx
@@ -21,12 +21,12 @@ export default class Sidebar extends Component {
       <nav 
         className="sidebar" 
         ref={ ref => this._container = ref }
-        style={ fixed ? {
-          position: 'fixed',
-          top: 0,
-          width: maxWidth,
+        style={{
+          position: fixed ? 'fixed' : null,
+          top: fixed ? 0 : null,
+          width: fixed ? maxWidth : null,
           maxHeight: availableHeight
-        } : null }>
+        }}>
 
         <div className="sidebar__inner">
           <h3 className="sidebar-item__version">Version 2.2</h3>
@@ -81,10 +81,14 @@ export default class Sidebar extends Component {
     let headerHeight = document.querySelector('header').offsetHeight;
     let footerHeight = document.querySelector('footer').offsetHeight;
     let distToBottom = scrollHeight - scrollY - innerHeight;
-    
+
+    // Calculate the space that the footer and header are actually occupying
+    let headerSpace = scrollY > headerHeight ? 0 : headerHeight - scrollY;
+    let footerSpace = distToBottom > footerHeight ? 0 : footerHeight - distToBottom;
+
     this.setState({ 
       fixed: scrollY >= headerHeight && sidebarHeight < parentHeight,
-      availableHeight: distToBottom > footerHeight ? innerHeight : innerHeight - footerHeight + distToBottom,
+      availableHeight: innerHeight - headerSpace - footerSpace,
       maxWidth: parentWidth
     });
   }