Add styles when scrolling in the page

src/css/header.css

@@ -5,6 +5,10 @@ header {
   inset-block-start: 0;
   inset-inline: 0;
 }
+header.scroll {
+  box-shadow: hsla(0 0% 0% / 0.1) 0 0.5rem 1rem;
+  transition-duration: 400ms;
+}
 header nav ul {
   flex-wrap: wrap;
   justify-content: flex-end;

src/js/main.js

@@ -1,6 +1,19 @@
 // Javascript is active
 document.documentElement.classList.add('js');
 
+// Add class when scrolling in the page
+const header = document.getElementById("site-header");
+const intercept = document.createElement("div");
+
+intercept.setAttribute("data-observer-intercept", "");
+header.before(intercept);
+
+const observer2 = new IntersectionObserver(([entry]) => {
+  header.classList.toggle("scroll", !entry.isIntersecting);
+});
+
+observer2.observe(intercept);
+
 // Update navigation according to page scroll
 const options = {
     rootMargin: '0px 0px -60% 0px'