如何修改jQuery代码为多个同.container类元素单独切换.sticky类

架构老林

2026-10-5

问题原因

原有代码只读取了第一个.container元素的位置参数，且滚动时直接对所有.container元素统一切换类，没有单独判断每个元素的位置，因此多元素场景下失效。

解决方案

滚动时遍历所有.container元素，单独计算每个元素的触发阈值，单独控制类切换即可，你猜测的$(this)确实是实现的核心。

基础实现代码

// 提前缓存所有.container元素，避免滚动时重复查询DOM
const $containers = $(".container");

$(window).scroll(function() {
  const currentScroll = $(window).scrollTop();
  // 遍历每个元素单独判断
  $containers.each(function() {
    const $this = $(this);
    const triggerTop = $this.offset().top;
    const triggerBottom = triggerTop + $this.height();
    const isSticky = currentScroll > triggerTop && currentScroll < triggerBottom;
    $this.toggleClass('sticky', isSticky);
  });
});

性能优化版（适合元素位置固定的场景）

如果你的.container元素的高度、页面位置不会动态变化，可以提前预存每个元素的触发位置，避免滚动时重复计算偏移量和高度，降低性能损耗：

const $containers = $(".container");
// 页面初始化时预存每个元素的触发阈值
$containers.each(function() {
  const $this = $(this);
  const top = $this.offset().top;
  $this.data({
    triggerTop: top,
    triggerBottom: top + $this.height()
  });
});

$(window).scroll(function() {
  const currentScroll = $(window).scrollTop();
  $containers.each(function() {
    const $this = $(this);
    const data = $this.data();
    const isSticky = currentScroll > data.triggerTop && currentScroll < data.triggerBottom;
    $this.toggleClass('sticky', isSticky);
  });
});