diff --git a/components/sidebar/sidebar.jsx b/components/sidebar/sidebar.jsx
index a673109be46d..b773698a3464 100644
--- a/components/sidebar/sidebar.jsx
+++ b/components/sidebar/sidebar.jsx
@@ -7,26 +7,26 @@ 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 (
       <nav 
         className="sidebar" 
         ref={ ref => this._container = ref }
-        style={ fixed ? {
-          position: 'fixed',
-          top: -extraHeight,
-          width: maxWidth,
-          maxHeight: 'none'
-        } : null }>
+        style={{
+          position: fixed ? 'fixed' : null,
+          top: fixed ? 0 : null,
+          width: fixed ? maxWidth : null,
+          maxHeight: availableHeight
+        }}>
 
         <div className="sidebar__inner">
           <h3 className="sidebar-item__version">Version 2.2</h3>
@@ -81,11 +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;
-    let availableSpace = innerHeight + distToBottom - footerHeight;
-    
+
+    // 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,
-      extraHeight: sidebarHeight > availableSpace ? sidebarHeight - availableSpace : 0,
+      availableHeight: innerHeight - headerSpace - footerSpace,
       maxWidth: parentWidth
     });
   }