fix-2085: Header should be semi-transparent and not expanding on scro…

…ll over (#2671) Co-authored-by: Mario Behling <[email protected]>
fossasia · Aug 24, 2023 · e8438b6 · e8438b6
1 parent 8391c1d
commit e8438b6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/src/backend/_scss/application.scss b/src/backend/_scss/application.scss
@@ -136,7 +136,7 @@ a {
 }
 
 .navbar-default {
-  background-color: $main-background;
+  background-color: transparent;
   border-color: $gray-extra-light;
 
   box-shadow: 0 0 8px 0 $navbar-shadow;
@@ -1546,7 +1546,7 @@ a {
         display: inline-block;
         font-size: 14px;
         left: 8px;
-        position: relative;
+                position: relative;
         width: 188px;
         a {
           border-bottom: 3px solid $white;

diff --git a/src/backend/assets/js/navbar.js b/src/backend/assets/js/navbar.js
@@ -57,16 +57,21 @@ $(document).ready(function() {
 
 
 // Making navbar translucent on scrolling down
-var navbar = $('.js-navbar');
+$(document).ready(function(){
+  try{
+    var navbar = document.getElementsByClassName('js-navbar')[0];
+  } catch(e){}
 
-window.addEventListener('scroll', function () {
-  if (window.scrollY > 0) {
-    if (!navbar.classList.contains('navbar--translucent')) {
-      navbar.classList.add('navbar--translucent');
+  window.addEventListener('scroll', function () {
+    if(!navbar) return;
+    if (window.scrollY > 0) {
+      if (!navbar.classList.contains('navbar--translucent')) {
+        navbar.classList.add('navbar--translucent');
+      }
+    } else {
+      if (navbar.classList.contains('navbar--translucent')) {
+        navbar.classList.remove('navbar--translucent');
+      }
     }
-  } else {
-    if (navbar.classList.contains('navbar--translucent')) {
-      navbar.classList.remove('navbar--translucent');
-    }
-  }
+  });
 });