为什么我的滚动触发的固定内容消失了（机车滚动）

Question

我的滑块组件在应该固定到页面时消失了。我相信这与页面滚动有关，机车滚动扰乱了页面的翻译。不过，这应该是可能的，我找到了 Greensock 的教程。但我无法让它工作，我的内容不断消失。这是一个最小的演示：https://codesandbox.io/s/cool-noyce-108h6c?file=/pages/index.tsx

这也是最终网页的链接：https://juliaweber-git-preview-inzn.vercel.app

非常感谢任何帮助！

Answer 1

我的项目中也出现了同样的问题。在检查标记开始的位置时，我发现它在固定时添加了 CSS 属性。

添加CSS停止变换，摆脱消失的内容

.accordions{
  transform: translate(0) !important;
}
useEffect(() => {
// Animation for accordion text elements
tl.current.to('.accordion .text', {
  height: 0,
  paddingBottom: 0,
  opacity: 1,
  stagger: 0.5,
}).to('.accordion', {
  marginBottom: -40,
  stagger: 0.5,
}, '<');

// ScrollTrigger setup
ScrollTrigger.create({
  trigger: '.accordions',
  start: 'top top',
  end: 'bottom top',
  pin: true,
  scrub: 1,
  opacity : 1 , 
  animation: tl.current,
  // markers: true,  
});

}, []);