导航栏透明，直到在 Angular 上滚动

Question

我正在尝试使我的导航栏透明。滚动时，我希望导航栏具有纯色背景色。我尝试了其他 SO 答案中所述的各种方法，但它们主要适用于 javascript。我曾尝试使用 background-color 等 CSS 属性，但无济于事。我相信既然滚动是用来触发颜色变化的，我可能需要使用jQuery？

header.html

<nav class="navbar navbar-expand-md  sticky-top bg-light navbar-light">
  <a class="navbar-brand">App Name</a>
    <div class="container-fluid justify-content-end">
      <div class="navbar-header">
       <div class="collapse navbar-collapse">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li><a class="nav-link" routerLink="/home" routerLinkActive="active">Home</a></li>
            <li><a class="nav-link" >About Us</a></li>
            <li><a class="nav-link" >Contact Us</a></li>
            <li><a class="nav-link" >Account</a></li>
          </ul>
       </div>
      </div>
    </div>
  </nav>

Answer 1

我本来打算把它放在评论中，但我不能，因为我没有足够的声誉，所以我就在这里分享它。

有人在 Twitter 上分享了这个，但是我忘记了是谁做的。 https://stackblitz.com/edit/angular-sticky-disappearing-header

根据您的描述，该链接可能会提供您实际想要的行为。您绝对不需要jQuery 来获取滚动事件，因为您可以使用fromEvent(window, "scroll")...

您只需要调整sticky.directive.ts 并将必要的样式放入styles.scss。

编辑：从 StackBlitz 添加代码 sn-p

    fromEvent(windowRef, "scroll")
      .pipe(
        map(() => windowRef.scrollY),
        pairwise(),
        map(([prev, next]) => next < THRESHOLD || prev > next),
        distinctUntilChanged(),
        startWith(true),
        takeUntil(destroy$)
      )
      .subscribe(stuck => {
        renderer.setAttribute(nativeElement, "data-stuck", String(stuck));
      });