From e78bb4b919cf437c645fc44d6a3a26931c0008bc Mon Sep 17 00:00:00 2001 From: Chloe Lam Date: Wed, 16 Oct 2024 14:41:05 -0700 Subject: [PATCH] Make header opaque on scroll with javascript Fixes #93 --- .../themes/fw-child/resources/js/child-functions.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/site/assets/themes/fw-child/resources/js/child-functions.js b/site/assets/themes/fw-child/resources/js/child-functions.js index 419c8880..ccde6108 100644 --- a/site/assets/themes/fw-child/resources/js/child-functions.js +++ b/site/assets/themes/fw-child/resources/js/child-functions.js @@ -15,6 +15,15 @@ var child_logging = true $(document).data('child_theme_dir', child_theme_dir) + // Scroll event handler + $(window).scroll(function() { + if ($(this).scrollTop() > 50) { + $('#main-header').css('background-color', 'rgba(236, 241, 244, 1)'); + } else { + $('#main-header').css('background-color', 'rgba(236, 241, 244, 0.5)'); + } + }); + // // HEADER // @@ -189,7 +198,6 @@ var child_logging = true }) } - if (child_logging == true) { console.log('end of child-functions.js') console.log('- - - - -')