当我向下滚动页面时，如何在导航栏下显示阴影？

Question

我的网站上有一个导航栏，当用户开始向下滚动页面时，我想设置阴影。

当我向下滚动页面时，如何在导航栏下显示阴影？

因此，如果用户向下滚动页面，则阴影应立即出现。

也许只能使用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%);
  }
}

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

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

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

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

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

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

          <nav id="block-subtheme-olivero-main-menu" class="primary-nav block block-menu navigation menu--main" aria-labelledby="block-subtheme-olivero-main-menu-menu" role="navigation">

            <h2 class="visually-hidden block__title" id="block-subtheme-olivero-main-menu-menu">Main navigation</h2>

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

              <li class="primary-nav__menu-item primary-nav__menu-item--link primary-nav__menu-item--level-1 primary-nav__menu-item--has-children" data-drupal-selector="primary-nav-menu-item-has-children">

                <a href="/culture-geek" class="primary-nav__menu-link primary-nav__menu-link--link primary-nav__menu-link--level-1 primary-nav__menu-link--has-children" data-drupal-selector="primary-nav-menu-link-has-children" data-drupal-link-system-path="taxonomy/term/14">
                  <span class="primary-nav__menu-link-inner primary-nav__menu-link-inner--level-1">Culture geek</span>
                </a>

                <button class="primary-nav__button-toggle" data-drupal-selector="primary-nav-submenu-toggle-button" aria-controls="primary-menu-item-1" aria-expanded="false">
                      <span class="visually-hidden">sous-navigation Culture geek</span>
                      <span class="icon--menu-toggle"></span>
                    </button>

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

Answer 1

只需窗口。即使您水平滚动window.scroll也会触发。

因此必须使用scrolltop方法。此方法设置或返回所选元素的垂直滚动栏位置。

window.addEventListener("scroll", function() {
  if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
    document.getElementById("header").style.boxShadow = "0 8px 6px -6px #000";
  } else {
    document.getElementById("header").style.boxShadow = "none";
  }
});

Answer 2

我认为这需要JavaScript。
尝试在标题下添加此。

<script>
window.onscroll = function () {
document.getElementById('header').style.boxShadow = "0px 2.5px 5px silver"
    if (document.documentElement.scrolTop < 10) {
document.getElementById('header').style.boxShadow = "0px 2.5px 5px #ffffff00"
}
}
</script>