1 files changed, 26 insertions, 3 deletions
diff --git a/static/header.js b/static/header.js
index 06d868a..a3f6275 100644
--- a/static/header.js
+++ b/static/header.js
@@ -7,6 +7,22 @@ window.addEventListener('resize', () => {
   isMobile = window.innerWidth < 769;
 });
 
+function listenUserScroll(e) {
+  e.preventDefault();
+}
+
+function blockUserScrolling() {
+  document.querySelector('html').style.overflowY = 'hidden';
+  window.addEventListener('mousewheel', listenUserScroll, { passive: false });
+  window.addEventListener('touchmove', listenUserScroll, { passive: false });
+}
+
+function unblockUserScrolling() {
+  document.querySelector('html').style.overflowY = 'auto';
+  window.removeEventListener('mousewheel', listenUserScroll);
+  window.removeEventListener('touchmove', listenUserScroll);
+}
+
 function hideTopNav() {
   let topNav = document.querySelector('.top-nav');
   topNav.style.opacity = '0';
@@ -30,7 +46,7 @@ function showContent(cb) {
 
   topNav.style.transition = '100ms';
   topNav.style.opacity = '1';
-  topNav.style.display = 'block';
+  topNav.style.display = 'inline-flex';
 
   setTimeout(() => {
     mainContainer.style.transition = '500ms';
@@ -40,7 +56,12 @@ function showContent(cb) {
       footer.style.transition = '500ms';
       footer.style.opacity = '1';
       footer.style.display = 'block';
+      !isMobile ? topNav.style.position = 'sticky' : null;
       if (cb) cb();
+
+      if (topNav.getBoundingClientRect().top > 0 && window.scrollY == 0) {
+        topNav.scrollIntoView({ behavior: 'smooth' });
+      }
     }, 500);
   }, 100);
 }
@@ -91,8 +112,9 @@ function clearHeaderTerminal(cb) {
     titleDesktop.innerHTML = '';
   }
 
-  footerCommandPrompt.style.height = 'calc(100vh)';
-  hideTopNav();
+  blockUserScrolling();
+  footerCommandPrompt.style.height = 'calc(100vh + 70px)';
+  document.querySelector('.top-nav').style.position = 'relative';
   footerCommandPrompt.querySelector('.after-prompt').scrollIntoView({
     behavior: 'smooth',
   });
@@ -100,6 +122,7 @@ function clearHeaderTerminal(cb) {
   setTimeout(() => {
     if (cb) cb();
     footerCommandPrompt.style.height = 'auto';
+    unblockUserScrolling();
   }, 1000);
 }