Lock the position of the header and sidebars (#15820)

sass/custom/_layout.scss

@@ -19,3 +19,51 @@
 //$sidebar-pad-medium: 15px;
 //$sidebar-pad-wide: 20px;
 //$sidebar-width-wide: 300px;
+
+html {
+    overflow-y: hidden;
+}
+
+.page-content {
+    display: inline-block;
+    height: calc(100% - 68px);;
+    margin-top: 68px;
+    overflow-y: scroll;
+    padding-top: 32px;
+    width: 100%;
+}
+
+#sidebar {
+    .grid {
+        position: fixed;
+        width: 33.33%;
+        .brand-logo-container {
+            margin-top: 0;
+        }
+    }
+}
+
+.site-header {
+    position: fixed;
+    width: 100%;
+}
+
+
+@media only screen and (max-width: $lap-end) {
+    #sidebar {
+      .grid {
+          position: initial;
+          width: 100%;
+        }
+    }
+    .site-header {
+        .pull-right {
+            position: fixed;
+        }
+    }
+    .hero {
+        > .grid-wrapper {
+            z-index: 0;
+        }
+    }
+  }

sass/oscailte/base/_footer.scss

@@ -8,7 +8,7 @@
   }
 }
 
-body > footer {
+body > footer, .page-content > footer {
   @include box-shadow(0 0 3px rgba(0, 0, 0, 0.25));
   background-color: $footer-background;
   // height: $footer-height;

sass/screen.scss

@@ -3,3 +3,4 @@
 @import 'custom/component_page';
 @import 'custom/syntax';
 @import 'custom/print';
+@import 'custom/layout';

source/_includes/site/sidebar.html

@@ -32,3 +32,15 @@
     {% endif %}
   {% endif %}
 </div>
+<script type="text/javascript">
+  // Some sidebars are longer than the screen so they can't be locked.
+  document.addEventListener('DOMContentLoaded', function() {
+    const sidebar = document.querySelector("#sidebar").querySelector(".grid");
+    if (sidebar) {
+      const content = document.querySelector(".page-content").querySelector(".grid-wrapper")
+      if (sidebar.clientHeight > content.clientHeight || sidebar.clientHeight > window.innerHeight) {
+        sidebar.style.display = "contents"
+      }
+    }
+  });
+</script>

source/_layouts/default.html

@@ -4,6 +4,7 @@
     <header class='site-header'>
       {% include site/header.html %}
     </header>
+    <div class="page-content">
 
     {% if page.hero_unit %}
       {% include site/hero_unit.html %}
@@ -38,6 +39,7 @@
       {% include site/footer.html %}
     </footer>
 
+  </div>
     {% include javascripts/scripts.html %}
   </body>
 </html>