Website: update sticky header (#15690)

Changes:
- Reverted the style change from
https://github.com/fleetdm/fleet/pull/15677
- Updated the sticky header function to not hide the header if the
mobile navigation menu has the `.open` class
- Added comments to the sticky header function to explain what it is
doing.

website/assets/styles/layout.less

@@ -450,6 +450,6 @@ body.detected-mobile {
 
 // Some utilities for the sticky nav behaviour.
 // Note: this will not be applied if a navigation menu open.
-.translate-y-0:not(:has(.show)) {
+.translate-y-0 {
   transform: translateY(-235px);
 }

website/views/layouts/layout.ejs

@@ -359,14 +359,24 @@
     <% /* Sticky header */ %>
     <script>
         var lastScrollTop = 0;
-        var header = document.querySelector('.header')
+        var header = document.querySelector('[purpose="header-container"]');
+        let mobileNavMenu = document.querySelector('[purpose="mobile-nav"]');
         window.addEventListener('scroll', windowScrolled);
         function windowScrolled() {
+          if(!header || !mobileNavMenu){
+            return;
+          }
+          let isMobileNavOpen = [...mobileNavMenu.classList].includes('show');
+          if(isMobileNavOpen) {
+            return;
+          }
           let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
           if(scrollTop > lastScrollTop && scrollTop > window.innerHeight * 1.5) {
+            // If the user scrolls 1.5x the height of their browser window, hide the page header.
             header.classList.add('translate-y-0');
             lastScrollTop = scrollTop;
           } else if(scrollTop < lastScrollTop - 60) {
+            // If the user scrolls 60 pixels upwards on the screen, we'll show the page header
             header.classList.remove('translate-y-0');
             lastScrollTop = scrollTop;
           }