From 8ee034a41c826a5ea40eb0ce02adb87cd90bf1e1 Mon Sep 17 00:00:00 2001
From: Cynthia Lin <cynthialin1004@gmail.com>
Date: Sat, 26 May 2018 10:18:06 -0700
Subject: [PATCH] help: Prevent scrolling when cursor is on body.

When you hover above the navbar, the cursor focuses on the page
body and scrolls the entire page, breaking the positioning of the
fixed sidebar and page content.

We disable scrolling on the body but allow the sidebar and Markdown
content page elements to be scrolled to fix this bug.
---
 static/js/portico/help.js         | 1 +
 static/styles/portico-signin.scss | 2 ++
 static/styles/portico.scss        | 7 +++++++
 3 files changed, 10 insertions(+)

diff --git a/static/js/portico/help.js b/static/js/portico/help.js
index 519321bc99..27b77f8dae 100644
--- a/static/js/portico/help.js
+++ b/static/js/portico/help.js
@@ -207,4 +207,5 @@ function scrollToHash(container) {
         update_page(html_map, path, container);
     });
 
+    $('body').addClass('noscroll');
 }());
diff --git a/static/styles/portico-signin.scss b/static/styles/portico-signin.scss
index daf032d45d..b0ee45360b 100644
--- a/static/styles/portico-signin.scss
+++ b/static/styles/portico-signin.scss
@@ -185,6 +185,8 @@ html {
 
 .header {
     background-color: #fff;
+    position: fixed;
+    width: 100%;
 }
 
 .header .top-links a,
diff --git a/static/styles/portico.scss b/static/styles/portico.scss
index 434dabe258..a454fa226a 100644
--- a/static/styles/portico.scss
+++ b/static/styles/portico.scss
@@ -2,6 +2,11 @@ body {
     background-color: #fafafa;
 }
 
+.noscroll {
+    overflow: hidden;
+    position: fixed;
+}
+
 .container-fluid {
     padding: 0px;
     min-height: 100%;
@@ -117,6 +122,7 @@ body {
     position: fixed;
     width: 100vw;
     height: calc(100vh - 59px);
+    margin-top: 59px;
     left: 0px;
 
     box-shadow: 0px -20px 50px rgba(0, 0, 0, 0.04);
@@ -1926,6 +1932,7 @@ input.new-organization-button {
     .app.help {
         position: absolute;
         height: calc(100vh - 40px);
+        margin-top: 39px;
     }
 
     .app.help .sidebar {