滚动到达特定点时进行角度检测

Question

我试图实现以下效果：
第一个容器（其中有一个名为 的类）的.top-container高度约为一页半。一开始，用户应该能够滚动直到该容器的末尾，但是一旦到达该容器，该容器就会变成fixed并且以下元素应该通过滚动来重叠它。

我的方法是检测用户何时到达顶部容器的末端，以便将其位置更改为固定。但是如何检测用户何时到达某个滚动点呢？

还有其他方法可以达到预期的效果吗？

我的代码：

<div class="container-fluid px-0 top-container">

  <div class="container-fluid bg-test justify-content-center min-vh-100 d-flex">
    <h1 class="align-self-center">PURE</h1>
  </div>

  <div class="container-fluid justify-content-center d-flex collections" *ngIf="collections">
    <div class="row align-self-center justify-content-around">
      <div class="col-12 mb-5 text-center">
        <h1>ALL COLLECTIONS</h1>
      </div>
      <div class="col-3" *ngFor="let collection of collections">
        <div class="flex-row">
          <div class="col-12 text-center">
            <h4>{{collection.name}}</h4>
            <p>- {{collection.desc}} -</p>
          </div>
          <div class="col-12 d-flex justify-content-center">
            <img [src]="collection.image" [alt]="collection.name" class="w-75 align-self-center">
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="padding-top">
  <app-slider></app-slider>
  <app-presentation></app-presentation>
</div>

CSS：

.top-container {
  background-color: #EDEDED;

  .collections {
    padding: 5%;
    background-color: white;
    h1 {
      font-family: "Zuric Light";
      text-transform: uppercase;
      color: #D3072A;
    }
    h4 {
      font-family: "Zuric Light";
      text-transform: uppercase;
    }
    p {
      font-family: "Zuric Light";
    }
  }

  .bg-test {
    background-image: url("/assets/images/products/pure/pure-upper-side-red.png");
    background-position: bottom left;
    background-size: contain;
    background-repeat: no-repeat;

    h1 {
      line-height: 1;
      margin: 0;
      font-family: "Zuric Bold";
      color: white;
      font-size: 200px;
      text-transform: uppercase;
      &::first-letter {
        margin-left: -0.05em;
      }
    }
    p {
      color: white;
      font-family: "Zuric Light";
      font-size: 30px;
    }
  }
}

Answer 1

尝试使用@HostListener监听滚动事件，直到容器结束。然后，调用您的函数。