styled header white when scrolling down

adminstyles.css

@@ -1237,6 +1237,10 @@ Add your custom styles in this file so it is easier to update the theme.
 
 @media screen {
 
+	.edit-post-visual-editor__content-area html:not([data-scroll="0"]) .site-header {
+		background-color: #fff;
+	}
+
 	.edit-post-visual-editor__content-area .site {
 		display: grid;
 		grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
@@ -1266,9 +1270,13 @@ Add your custom styles in this file so it is easier to update the theme.
 
 	.edit-post-visual-editor__content-area .site-header {
 		position: sticky;
-		z-index: 900;
+		z-index: 500;
 		top: 0;
 		margin-bottom: 2rem;
+		grid-template-areas: "main" "secondary ";
+		grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
+		width: 100vw;
+		background-color: transparent;
 	}
 
 	.edit-post-visual-editor__content-area .site-header .main {
@@ -1276,6 +1284,7 @@ Add your custom styles in this file so it is easier to update the theme.
 		flex-flow: column;
 		align-items: initial;
 		justify-content: space-between;
+		z-index: 900;
 	}
 
 	.edit-post-visual-editor__content-area .site-header .secondary {

functions.php

@@ -140,8 +140,13 @@ function xarxaprod_theme_scripts() {
 	// register our jQuery minified from theme directory
 	//wp_enqueue_script('jquery', get_template_directory_uri().'/js/jquery.min.js', array(),'3.7.1',true);
   
+	// navigation scripts
 	wp_enqueue_script( 'xarxaprod-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
 
+	// scroll detection script
+	// https://css-tricks.com/styling-based-on-scroll-position/
+	wp_enqueue_script( 'xarxaprod-scrollposition', get_template_directory_uri() . '/js/scrollposition.js', array(), _S_VERSION, true );
+
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 		wp_enqueue_script( 'comment-reply' );
 	}

js/scrollposition.js

@@ -0,0 +1,40 @@
+// https://css-tricks.com/styling-based-on-scroll-position/
+// script to detect the scroll position and then call for it in css
+
+
+// The debounce function receives our function as a parameter
+const debounce = (fn) => {
+
+  // This holds the requestAnimationFrame reference, so we can cancel it if we wish
+  let frame;
+
+  // The debounce function returns a new function that can receive a variable number of arguments
+  return (...params) => {
+
+    // If the frame variable has been defined, clear it now, and queue for next frame
+    if (frame) {
+      cancelAnimationFrame(frame);
+    }
+
+    // Queue our function call for the next frame
+    frame = requestAnimationFrame(() => {
+
+      // Call our function and pass any params we received
+      fn(...params);
+    });
+
+  }
+};
+
+
+// Reads out the scroll position and stores it in the data attribute
+// so we can use it in our stylesheets
+const storeScroll = () => {
+  document.documentElement.dataset.scroll = window.scrollY;
+}
+
+// Listen for new scroll events, here we debounce our `storeScroll` function
+document.addEventListener('scroll', debounce(storeScroll), { passive: true });
+
+// Update scroll position for first time
+storeScroll();

sass/layouts/_no-sidebar.scss

@@ -1,4 +1,9 @@
 @media screen {
+	html:not([data-scroll='0']) {
+		.site-header {
+		  background-color: $color__white;
+		}
+	}
 	.no-sidebar {
 	}
 	.site {
@@ -29,15 +34,34 @@
 	}
 	.site-header {
 		position: sticky;
-		z-index: 900;
+		z-index: 500;
 		top: 0;
 		margin-bottom: 2rem;
+    grid-template-areas:
+		  "main"
+			"secondary ";
+    grid-template-columns: 1fr minmax(0,35em) minmax(0,35em) 1fr;
+    width: 100vw;
+		background-color: transparent;
+		  //&::before {
+			//	display: inline-block;
+			//	content: "";
+		  //	background-image: linear-gradient(
+			//		#fff 0%
+			//		transparent 100%,
+			//		);
+		  //	width: 100vw;
+			//	height: 100%;
+			//	position: absolute;
+			//	left: 0;
+			//	top: 0;
+		  //}
 		.main {
 			display: flex;
 			flex-flow: column;
 			align-items: initial;
 			justify-content: space-between;
-			//padding-left: 1rem;
+			z-index: 900;
 		}
 		.secondary {
 			display: flex;

style.css

@@ -1105,6 +1105,10 @@ textarea {
 --------------------------------------------------------------*/
 @media screen {
 
+	html:not([data-scroll="0"]) .site-header {
+		background-color: #fff;
+	}
+
 	.site {
 		display: grid;
 		grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
@@ -1134,9 +1138,13 @@ textarea {
 
 	.site-header {
 		position: sticky;
-		z-index: 900;
+		z-index: 500;
 		top: 0;
 		margin-bottom: 2rem;
+		grid-template-areas: "main" "secondary ";
+		grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
+		width: 100vw;
+		background-color: transparent;
 	}
 
 	.site-header .main {
@@ -1144,6 +1152,7 @@ textarea {
 		flex-flow: column;
 		align-items: initial;
 		justify-content: space-between;
+		z-index: 900;
 	}
 
 	.site-header .secondary {