Make navigation bar white when scrolled down

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/scss/style.scss b/src/scss/style.scss
index ccbb26e2fbb841534157b28b84c0a94b1261860f..3b0685e1ad9822cd595597186571f7b726216fd1 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -90,6 +90,15 @@ h6 {
        }
 }
 
+.navbar {
+       &.scrolled {
+               background-color: white;
+               box-shadow: $shadow-2;
+
+               transition: background-color 200ms linear;
+       }
+}
+
 footer {
        .btn-toolbar .icon {
                height: 2.25rem;

diff --git a/src/static/js/site.js b/src/static/js/site.js
index 66a660dd73a6ec7d650a2dc57e89a215b2b6528e..95a150c7d5ac93cdd50d746e424a6253aae1ca67 100644 (file)
--- a/src/static/js/site.js
+++ b/src/static/js/site.js
@@ -1,13 +1,9 @@
 $(document).ready(function () {        
-    $(window).scroll(function () {
-        if ($(document).scrollTop() > 100) {
-            $(".fixed-top").addClass("scrolled");
-            $(".menu-text").addClass("hidden");
-        } else {
-            $(".fixed-top").removeClass("scrolled");
-            $(".menu-text").removeClass("hidden");
-        }
-    });
+    $(document).scroll(function () {
+               var nav = $(".navbar");
+               nav.toggleClass("scrolled", $(this).scrollTop() >= 1);
+       });
+
     //* Menu *//
        $('.navbar-toggler-left').click(function() {
                $('#navbarSupportedContent, #mask').addClass('open');
@@ -80,4 +76,4 @@ jQuery.postJSON = function(url, args, callback) {
                        callback(eval("(" + response + ")"));
                }
        });
-};
\ No newline at end of file
+};