滚动时粘性元素top值动态更新导致闪烁/抖动的问题咨询与优化方案请求

大家好，我正在实现一个滚动同步的粘性元素效果：每个全屏高度的.container区块内的.logo和.content元素都设置了position: sticky，同时通过jQuery根据滚动位置动态调整它们的top属性，希望在滚动多个全屏区块的过程中，这些元素能始终保持完美的视觉同步，不会出现闪烁、微跳的情况。

目前我已经完成了基础的同步逻辑，但滚动时还是会有轻微的抖动问题，想请教有没有更好的处理思路或者优化方案？

我的当前实现代码 #

HTML结构

<div id="wrapper" class="scroll">
  <div class="container diamond">
    <div class="sticky">
      <a href="#">
        <div class="logo"><img src="https://images.unsplash.com/photo-1747134392051-5e112c58ce1e?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8" alt="Image 1" class="image"></div>
      </a>
      <a href="#">
        <div class="content">
          <h3>MAKERSPLACE 1</h3>
          <span>2022-2025</span>
          <span>[View project]</span>
        </div>
      </a>
    </div>
  </div>
  <div class="container ruby">
    <div class="sticky">
      <a href="#">
        <div class="logo"><img src="https://images.unsplash.com/photo-1750101272034-7becde7454dd?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw4fHx8ZW58MHx8fHx8" alt="Image 1" class="image"></div>
      </a>
      <a href="#">
        <div class="content">
          <h3>MAKERSPLACE 2</h3>
          <span>2022-2025</span>
          <span>[View project]</span>
        </div>
      </a>
    </div>
  </div>
  <div class="container emerald">
    <div class="sticky">
      <a href="#">
        <div class="logo"><img src="https://images.unsplash.com/photo-1749984340771-c3a967db0a28?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyMHx8fGVufDB8fHx8fA%3D%3D" alt="Image 1" class="image"></div>
      </a>
      <a href="#">
        <div class="content">
          <h3>MAKERSPLACE 3</h3>
          <span>2022-2025</span>
          <span>[View project]</span>
        </div>
      </a>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

CSS样式

*, *:before, *:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
}
body {
  -webkit-text-size-adjust: none;
  background: #fff;
}
.fixed {
  position: fixed;
  width: 100%;
  text-align: center;
  z-index: 10;
  background: white;
}
.container {
  height: 100dvh;
  overflow: hidden;
  position: relative;
}
.container .image-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.container .logo {
  position: relative;
  width: 500px;
  height: 400px;
  object-fit: cover;
}
.content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
@media screen and (max-width: 480px) {
  .container .logo {
    width: 250px;
    margin-left: -125px;
  }
}
.container.diamond {
  background: #F0F8FF;
}
.container.ruby {
  background: #DC143C;
}
.container.emerald {
  background: #00FF7F;
}
.container .logo, .container .content {
  will-change: transform;
  transition: transform 0.3s linear;
}
.sticky {
  position: sticky;
  top: 50px;
  left: 50px;
  z-index: 1;
}

JavaScript逻辑

// Auto-jquery-cache function
$C = (($) => {
  let c = {};
  return (s, f) => {
    if (!c[s] || f) {
      c[s] = $(s);
    }
    return c[s];
  };
})($);

$(document).ready(function() {
  const $diamond = $C('.diamond').find('.logo');
  const $ruby = $C('.ruby').find('.logo');
  const $emerald = $C('.emerald').find('.logo');

  // Add the same cache for the content divs
  const $diamondContent = $C('.diamond').find('.content');
  const $rubyContent = $C('.ruby').find('.content');
  const $emeraldContent = $C('.emerald').find('.content');

  const diamondTop = $diamond.offset().top;
  const diaRelTop = $diamond.position().top;
  const rubyTop = $ruby.offset().top;
  const emeraldTop = $emerald.offset().top;

  // Initial position adjustment
  $ruby.css('top', -rubyTop + diamondTop + diaRelTop);
  $emerald.css('top', -emeraldTop + diamondTop + diaRelTop);

  // Synchronize position for content elements
  $rubyContent.css('top', -rubyTop + diamondTop + diaRelTop);
  $emeraldContent.css('top', -emeraldTop + diamondTop + diaRelTop);

  const handle = (e) => {
    e.preventDefault();
    const t = $(window).scrollTop();

    // Update the position for both .logo and .content
    $diamond.css('top', t + diamondTop);
    $ruby.css('top', -rubyTop + $diamond.offset().top + diaRelTop);
    $emerald.css('top', -emeraldTop + $diamond.offset().top + diaRelTop);

    $diamondContent.css('top', t + diamondTop);
    $rubyContent.css('top', -rubyTop + $diamond.offset().top + diaRelTop);
    $emeraldContent.css('top', -emeraldTop + $diamond.offset().top + diaRelTop);
  };

  $(window).on('scroll', handle);
});

目前遇到的问题与疑问 #

• 滚动过程中元素偶尔会出现轻微的抖动/闪烁，尤其是快速滚动时
• 猜测可能是scroll事件触发过于频繁，导致大量DOM重排重绘；或者position: sticky与JS动态设置top属性存在冲突
• 已经尝试了缓存DOM元素、添加will-change: transform优化，但效果不明显

想请教各位：有没有更高效的同步方案？比如用CSS替代部分JS逻辑，或者优化JS的滚动事件处理（比如节流、使用requestAnimationFrame），或者调整定位方式来避免冲突？

内容来源于stack exchange