From 71952c9b0aa5bca036af11c2d058dd76a763e21a Mon Sep 17 00:00:00 2001
From: Kelvin Oghenerhoro Omereshone <kelvin@fleetdm.com>
Date: Wed, 10 Aug 2022 04:23:14 +0100
Subject: [PATCH] Make top banner not sticky (#6797)

* feat: Make top banner not sticky

* fix: issue with transition on page load and scroll

* fix: add semi colon to less to resolve linting issues

* fix: commas issue in less

* fix: space between header and cta-banner

* fix: resolve scrolling weird animation and hero section jumps

* fix: responseive top value set

* feat: don't animate background color

* feat: add transition for the top property of the header

* update sticky header function and styles

Co-authored-by: Eric <eashaw@sailsjs.com>
---
 website/assets/styles/layout.less | 87 ++++++++++++++++++++-----------
 website/views/layouts/layout.ejs  | 22 +++++---
 2 files changed, 71 insertions(+), 38 deletions(-)

diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less
index ee4a20d07d..19d73764e7 100644
--- a/website/assets/styles/layout.less
+++ b/website/assets/styles/layout.less
@@ -15,10 +15,41 @@ html, body {
   position: relative;
   padding-bottom: @footer-height;
 }
+.homepage-cta-banner {
+  background-color: #FFF;
+  color: #000;
+
+  a {
+    color: #000;
+  }
+}
+// Apply this margin when there is a CTA banner on the homepage
+.homepage-cta-banner + .homepage-header-top {
+  top: 52px;
+}
+.non-homepage-cta-banner {
+  background-color: @core-fleet-black;
+  color: #FFF;
+  a {
+    color: #FFF;
+  }
+}
+[purpose='header-report-cta'] {
+  p {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  a {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    text-decoration: underline;
+  }
+}
 
 [purpose='page-header'] {
     // rules for sticky nav transitions
-    transition-property: all;
+    transition-property: background-color, transform, bottom;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 500ms;
 
@@ -106,28 +137,18 @@ html, body {
       }
     }
   }
-  [purpose='header-report-cta'] {
-    p {
-      font-size: 14px;
-      line-height: 20px;
-    }
-    a {
-      font-size: 14px;
-      line-height: 20px;
-      font-weight: 700;
-      text-decoration: underline;
-    }
-  }
 } // Homepage header styles
 &.homepage-header {
   z-index: 9999;
-  position: fixed;
-  color: #ffffff;
+  position: absolute;
+  color: #fff;
   top: 0;
   left: 0;
   right: 0;
   &.sticky {
+    position: fixed;
     background-color: #fff;
+    border-color: transparent;
     color: #192147;
 
     .btn.btn-link {
@@ -154,14 +175,6 @@ html, body {
       cursor: pointer;
     }
   }
-  [purpose='header-report-cta'] {
-    background-color: #FFF;
-    color: #000;
-
-    a {
-      color: #000;
-    }
-  }
 } // Non-homepage header styles
 &.header {
     left: 0;
@@ -193,13 +206,6 @@ html, body {
       cursor: pointer;
     }
   }
-  [purpose='header-report-cta'] {
-    background-color: @core-fleet-black;
-    color: #FFF;
-    a {
-      color: #FFF;
-    }
-  }
 }
 
 // Footer styles
@@ -254,6 +260,11 @@ body.detected-mobile {
   // devices (like the iPad) as well as handset devices (like the iPhone).
   // …
 }
+@media (max-width: 992px) {
+  .homepage-cta-banner+.homepage-header-top {
+    top: 72px;
+  }
+}
 
 @media (max-width: 767px) {
   [purpose='page-wrap'] {
@@ -264,7 +275,11 @@ body.detected-mobile {
     }
   }
 }
-
+@media (max-width: 605px) {
+  .homepage-cta-banner + .homepage-header-top {
+    top: 92px;
+  }
+}
 @media (max-width: 575px) {
   [purpose='page-wrap'] {
     padding-bottom: 371px;
@@ -296,6 +311,16 @@ body.detected-mobile {
     }
   }
 }
+@media (max-width: 393px) {
+  .homepage-cta-banner + .homepage-header-top {
+    top: 112px;
+  }
+}
+@media (max-width: 330px) {
+  .homepage-cta-banner + .homepage-header-top {
+    top: 132px;
+  }
+}
 
 // Some utilities for the sticky nav behaviour
 .translate-y-0 {
diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
index 94912d86d7..c3b50a23f3 100644
--- a/website/views/layouts/layout.ejs
+++ b/website/views/layouts/layout.ejs
@@ -111,14 +111,14 @@
     <!--STYLES END-->
   </head>
   <body>
-    <div purpose="page-wrap">
-      <div class="<%= isHomepage ? 'homepage-header' : 'header' %>" purpose="page-header">
-        <div purpose="header-report-cta" class="<%= headerCTAHidden  ?  'd-none' : 'd-flex' %> flex-row justify-content-center align-items-md-center">
+    <div purpose="page-wrap" dat>
+      <div purpose="header-report-cta" class="<%= isHomepage ? 'homepage-cta-banner' : 'non-homepage-cta-banner' %> <%= headerCTAHidden  ?  'd-none' : 'd-flex' %> flex-row justify-content-center align-items-md-center">
           <div class="mb-0 d-flex flex-lg-row flex-column justify-content-center py-3 px-2">
             <p class="text-center pr-1 mb-0">We surveyed 200+ security practitioners to discover the state of device management in 2022. </p>
             <a class="mb-0 d-block text-center d-lg-inline text-lg-left" href="/reports/state-of-device-management">Click here to learn about their struggles and best practices.</a>
           </div>
-        </div>
+      </div>
+      <div class="<%= isHomepage ? 'homepage-header' : 'header' %> <%= !headerCTAHidden ? 'homepage-header-top' : null %>" purpose="page-header">
         <div style="max-width: 1248px; height: 94px;" class="container-fluid d-flex justify-content-between align-items-center pt-3 pb-3 px-3 px-md-4">
           <a href="/" style="max-width: 118px;">
             <% /* The homepage-header on the homepage has a white fleet logo */ %>
@@ -360,13 +360,18 @@
     <script>
         var lastScrollTop = 0;
         var header = document.querySelector('.header') || document.querySelector('.homepage-header')
+        var ctaBanner = document.querySelector('[purpose="header-report-cta"]')
         window.addEventListener('scroll', windowScrolled)
 
         function windowScrolled() {
           var scrollTop = window.pageYOffset || document.documentElement.scrollTop
           var fleetLogo = header.querySelector('img')
           var hamburgerMenuIcon = header.querySelector('.btn.btn-link > img')
-          if(scrollTop == 0 && header.classList.contains('homepage-header')) {
+          let ctaBannerHeightOrTopOfPage = ctaBanner ? ctaBanner.clientHeight : 0;
+          if(scrollTop < ctaBannerHeightOrTopOfPage && header.classList.contains('homepage-header')) {
+              if (ctaBanner) {
+                header.classList.add('homepage-header-top')
+              }
               header.classList.remove('sticky')
               fleetLogo.src = '/images/logo-white-162x92@2x.png'
               hamburgerMenuIcon.src = '/images/icon-hamburger-16x14@2x.png'
@@ -375,12 +380,15 @@
           if(scrollTop > lastScrollTop && scrollTop > window.innerHeight * 1.5) {
             header.classList.add('translate-y-0');
           } else {
-            if(header.classList.contains('homepage-header') && scrollTop > 16) {
+            // If the header is touching the top of the viewport
+            if(header.getBoundingClientRect().y <= 0) {
+              header.classList.remove('homepage-header-top')
               header.classList.add('sticky')
+
               fleetLogo.src = '/images/logo-blue-162x92@2x.png'
               hamburgerMenuIcon.src="/images/icon-hamburger-blue-16x14@2x.png"
             }
-              header.classList.remove('translate-y-0');
+            header.classList.remove('translate-y-0');
           }
           lastScrollTop = scrollTop;
         }