Ionic 3：检测滚动视图元素并实现分组头部粘性效果

我来帮你搞定这个需求！这是个常见的滚动交互场景，结合Angular的视图操作和原生DOM检测就能轻松实现。咱们一步步来：

1. 先准备CSS样式 #

首先定义固定头部的样式，确保固定后不会遮挡内容，视觉上也有清晰的层级区分：

.day-overview-group {
  /* 保留你原有的样式，加上过渡让固定/取消固定的过程更平滑 */
  transition: all 0.3s ease;
}

.sticky-group-header {
  position: fixed;
  top: 0;
  z-index: 10; /* 确保在卡片上方显示 */
  background-color: white; /* 和页面背景保持一致，避免透传下方内容 */
  width: calc(100% - 32px); /* 对应ion-grid的padding值，根据你的实际布局调整 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 加个阴影强化层级感 */
  padding: 16px; /* 和原分组头部内边距保持一致，避免布局跳变 */
}

2. 修改模板，添加视图引用和状态绑定 #

给分组头部和整个分组容器添加模板引用变量，同时把固定类的状态绑定到组件内的数组：

<ion-grid *ngFor="let day of dayOverViewByGroup; let i = index" padding>
  <!-- 给整个分组容器加引用 #groupContainer -->
  <div *ngIf="day.children.length > 0" #groupContainer>
    <!-- 给分组头部加引用 #groupHeader，绑定sticky类到isSticky数组 -->
    <div class="day-overview-group" #groupHeader [class.sticky-group-header]="isSticky[i]">
      <h2 class="day-overview-group__name">{{day.name}}</h2>
      <p class="day-overview-group__children">({{day.totalCheckinChildren}}/{{day.totalChildren}})</p>
    </div>
    <!-- 下面的ion-row和ion-cards保持原有代码不变 -->
    <ion-row align-items-center class="card-header">
      ...
    </ion-row>
    <ion-card *ngFor="let children of day.children; let j = index">
      ...
    </ion-card>
  </div>
</ion-grid>

3. 组件类实现滚动监听和视口检测逻辑 #

在你的Angular组件里，通过@ViewChildren获取所有分组的头部和容器元素，然后监听滚动事件判断是否需要固定：

import { Component, ViewChildren, ElementRef, OnInit, OnDestroy, QueryList } from '@angular/core';
import { fromEvent, Subscription } from 'rxjs';
import { throttleTime } from 'rxjs/operators';

@Component({
  // 保留你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnInit, OnDestroy {
  @ViewChildren('groupHeader') groupHeaders!: QueryList<ElementRef>;
  @ViewChildren('groupContainer') groupContainers!: QueryList<ElementRef>;
  isSticky: boolean[] = [];
  private scrollSubscription?: Subscription;

  ngOnInit() {
    // 初始化isSticky数组，默认所有分组都不固定
    this.isSticky = this.dayOverViewByGroup.map(() => false);
    // 监听滚动事件，用throttleTime减少触发频率，提升页面性能
    this.scrollSubscription = fromEvent(window, 'scroll')
      .pipe(throttleTime(50))
      .subscribe(() => this.updateStickyHeaders());
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.scrollSubscription?.unsubscribe();
  }

  private updateStickyHeaders() {
    // 遍历每个分组，逐一判断是否需要固定头部
    this.dayOverViewByGroup.forEach((day, index) => {
      // 只处理包含5张及以上卡片的分组
      if (day.children.length < 5) {
        this.isSticky[index] = false;
        return;
      }

      const headerEl = this.groupHeaders.toArray()[index].nativeElement;
      const containerEl = this.groupContainers.toArray()[index].nativeElement;

      const headerRect = headerEl.getBoundingClientRect();
      const containerRect = containerEl.getBoundingClientRect();

      // 判断条件：
      // 1. 分组头部已经滚动到视口顶部（headerRect.top <= 0）
      // 2. 整个分组还没完全移出视口（containerRect.bottom > 0）
      this.isSticky[index] = headerRect.top <= 0 && containerRect.bottom > 0;
    });
  }
}

4. 细节优化说明 #

• 节流处理：用RxJS的throttleTime(50)让滚动事件每50ms触发一次，避免频繁计算DOM位置导致页面卡顿
• 宽度适配：固定头部的width要和原分组容器宽度匹配，我这里用calc(100% - 32px)对应ion-grid的默认padding，你可以根据自己的布局调整数值
• 平滑过渡：给.day-overview-group添加transition属性，让固定/取消固定的过程更自然

这样就能实现你想要的效果：当分组包含5张及以上卡片时，头部滚动到视口顶部就固定，直到整个分组的卡片完全移出视口才取消固定。

内容的提问来源于stack exchange，提问作者Verthon