Question

我正在尝试使导航栏透明。滚动时，我希望导航栏具有纯背景色。我已经尝试了其他SO答案中所述的各种方法，但它们主要适用于javascript。我尝试使用CSS属性，例如background-color，但无济于事。我相信由于滚动是用来触发颜色变化的，所以我可能需要利用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添加代码段

    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));
      });

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

1 个答案: