Make header opaque on scroll with javascript

Fixes #93
OpenDRR · Oct 31, 2024 · e78bb4b · e78bb4b
1 parent dc990cf
commit e78bb4b
Showing 1 changed file with 9 additions and 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
@@ -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('- - - - -')