How do I make a shadow appear under the navigation bar when I scroll down the page?-CodePudding

I have a navigation bar on my website and I want to set a shadow when the user starts scrolling down the page.

How do I make a shadow appear under the navigation bar when I scroll down the page ?

So if the user scrolls down the page, the shadow should appear immediately.

Maybe it's possible to do this with just CSS.

CSS :

.site-header {
    z-index: 111;
    position: sticky;
    top: 0;
}

@media (max-width: 75rem) {
  .site-header__fixable .site-header__inner {
    box-shadow: -36px 1px 36px rgb(0 0 0 / 8%);
  }
}

HTML :

<header id="header"  data-drupal-selector="site-header" role="banner" data-once="navigation">

                <div  data-drupal-selector="site-header-fixable">
          <div >
            <button  data-drupal-selector="sticky-header-toggle" role="switch" aria-controls="site-header__inner" aria-label="Sticky header" aria-checked="false">
              <span >
                <span></span>
                <span></span>
                <span></span>
              </span>
            </button>
          </div>

                    <div id="site-header__inner"  data-drupal-selector="site-header-inner">
            <div >

<div  data-drupal-selector="header-nav-overlay"></div>

                              <div  data-drupal-selector="mobile-buttons">
                  <button  data-drupal-selector="mobile-nav-button" aria-label="Main Menu" aria-controls="header-nav" aria-expanded="false">
                    <span >Menu</span>
                    <span ></span>
                  </button>
                </div>

                <div id="header-nav"  data-drupal-selector="header-nav">

<nav id="block-subtheme-olivero-main-menu"  aria-labelledby="block-subtheme-olivero-main-menu-menu" role="navigation">
            
  <h2  id="block-subtheme-olivero-main-menu-menu">Main navigation</h2>

    <ul  data-drupal-selector="primary-nav-menu--level-1" data-once="olivero-automatic-mobile-nav">

        <li  data-drupal-selector="primary-nav-menu-item-has-children">
                              
                      <a href="/culture-geek"  data-drupal-selector="primary-nav-menu-link-has-children" data-drupal-link-system-path="taxonomy/term/14">            <span >Culture geek</span>
          </a>
                       
                <button  data-drupal-selector="primary-nav-submenu-toggle-button" aria-controls="primary-menu-item-1" aria-expanded="false">
                  <span >sous-navigation Culture geek</span>
                  <span ></span>
                </button>

              <span data-drupal-selector="primary-nav-menu-