无需jQuery，如何判断position: sticky元素固定状态并设置样式？

嘿，这个需求其实用IntersectionObserver完全能实现，大概率是你之前的写法没抓对核心逻辑！下面我给你分享Angular项目里的具体实现方案，全程不用jQuery这类第三方工具：

方案一：用IntersectionObserver精准监听粘性状态 #

核心思路是给sticky元素上方加个"哨兵"元素——当哨兵滚出视口时，就说明你的sticky元素进入固定状态了；反之哨兵回到视口，就解除固定样式。

1. 先调整模板结构 #

给你的HTML加个哨兵div，高度要和sticky元素的top值一致（这里是20px）：

<div style="height: 700px;">
  <!-- 哨兵元素，用来判断sticky状态 -->
  <div #stickySentinel style="height: 20px;"></div>
  <div class="title" #stickyElement style="position: sticky; position: -webkit-sticky; top: 20px;">
    This div is to be styled on being 'stuck'
  </div>
</div>

2. 组件里写监听逻辑 #

用Angular的ViewChild拿到元素，初始化IntersectionObserver：

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-sticky-demo',
  templateUrl: './sticky-demo.component.html',
  styleUrls: ['./sticky-demo.component.css']
})
export class StickyDemoComponent implements OnInit, OnDestroy {
  @ViewChild('stickySentinel') stickySentinel!: ElementRef<HTMLDivElement>;
  @ViewChild('stickyElement') stickyElement!: ElementRef<HTMLDivElement>;
  private observer?: IntersectionObserver;

  ngOnInit(): void {
    // 配置观察者：当哨兵完全不在视口时触发回调
    const observerOptions = {
      root: null, // 用视口作为根容器
      rootMargin: '0px',
      threshold: 0 // 哨兵完全不可见时触发
    };

    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        // 哨兵没在视口 → sticky元素固定了
        if (!entry.isIntersecting) {
          this.stickyElement.nativeElement.classList.add('stuck');
        } else {
          this.stickyElement.nativeElement.classList.remove('stuck');
        }
      });
    }, observerOptions);

    // 开始监听哨兵元素
    this.observer.observe(this.stickySentinel.nativeElement);
  }

  ngOnDestroy(): void {
    // 组件销毁时记得停止监听，防止内存泄漏
    this.observer?.unobserve(this.stickySentinel.nativeElement);
    this.observer?.disconnect();
  }
}

3. 最后补全CSS样式 #

把固定状态的样式写到.stuck类里：

.title { 
  font-size: 16px; 
  color: black;
  transition: all 0.3s ease; /* 可选：加个过渡动画，样式变化更丝滑 */
}

/* 固定时的样式 */
.title.stuck { 
  font-size: 18px; 
  background: grey; 
}

方案二：监听滚动事件（备选） #

如果你觉得Observer的方式有点绕，也可以直接监听窗口滚动，判断元素的位置：

import { Component, ViewChild, ElementRef, HostListener } from '@angular/core';

@Component({
  selector: 'app-sticky-demo',
  templateUrl: './sticky-demo.component.html',
  styleUrls: ['./sticky-demo.component.css']
})
export class StickyDemoComponent {
  @ViewChild('stickyElement') stickyElement!: ElementRef<HTMLDivElement>;

  @HostListener('window:scroll', [])
  onWindowScroll(): void {
    const element = this.stickyElement.nativeElement;
    const rect = element.getBoundingClientRect();
    // 当元素的top值等于我们设置的sticky top（20px），说明已经固定
    const isStuck = rect.top <= 20;
    
    if (isStuck) {
      element.classList.add('stuck');
    } else {
      element.classList.remove('stuck');
    }
  }
}

⚠️ 注意：滚动事件会频繁触发，建议加个防抖函数优化性能，避免页面卡顿。

为啥你之前的IntersectionObserver没生效？ #

多半是直接监听了sticky元素本身——但sticky元素固定后，其实还是和视口处于交叉状态的，所以没法通过它自己的交叉状态判断是否固定。用上方的哨兵就解决了这个问题～

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