Avoid flicker of stucked header if logged in

verdigado · Feb 19, 2024 · 9e39045 · 9e39045
1 parent ee9c202
commit 9e39045
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 27 deletions.
diff --git a/assets/js/frontend.js b/assets/js/frontend.js
@@ -4,22 +4,13 @@ const stickyElement = document.querySelector('.navbar-main');
 
 
 const observer = new IntersectionObserver(
-  ([e]) => {
-    stickyElement.classList.toggle('stuck', e.intersectionRatio < 1);
-
-    let h = jQuery('.navbar-main').height();
-    if (jQuery('body.admin-bar').length) {
-      h += 32;
-    }
-
-    if (e.intersectionRatio < 1) {
-      jQuery('#content').css('margin-top', h);
-    } else {
-      jQuery('#content').css('margin-top', 0);
+    ([e]) => {
+        stickyElement.classList.toggle('stuck', ! e.isIntersecting);
+    },
+    {  root: null,
+       rootMargin: "0px",
+       threshold: [0,  1]
     }
-
-  },
-  { threshold: [0, 1] }
 );
 
 observer.observe(stickyDetector);

diff --git a/sass/_header.scss b/sass/_header.scss
@@ -5,6 +5,24 @@ header {
     }
 }
 
+
+body.admin-bar {
+
+    .navbar {
+
+        &-main.stuck {
+
+            @include media-breakpoint-up(sm) {
+                top: 47px;
+            }
+
+            @include media-breakpoint-up(md) {
+                top: 32px;
+            }
+        }
+    }
+}
+
 .navbar {
 
     &-main {
@@ -15,6 +33,7 @@ header {
     &-main.stuck {
         position: fixed;
         width: 100%;
+
         top: 0;
         z-index: 5000;
 
@@ -25,9 +44,10 @@ header {
 
     &-brand {
         opacity: 0;
-        width: 50px;
         margin-left: 0.5rem;
 
+        padding: 2px;
+
         @include media-breakpoint-up(md) {
             margin-left: 0;
         }
@@ -96,7 +116,6 @@ body {
         line-height: 1.3em;
     }
 
-
     @include media-breakpoint-up(md) {
         padding-left: 12px;
         padding-right: 12px;
@@ -203,13 +222,3 @@ body {
     height: 1px;
     background: $white;
 }
-
-body.admin-bar {
-
-    .navbar {
-
-        &-main.stuck {
-            top: 32px;
-        }
-    }
-}