ScrollMagic中nth-child(even)伪选择器失效：Section Wipes背景色不生效

Hey there! I ran into this exact issue with ScrollMagic a while back, so I know exactly what's going on here. Let's break down why your selector isn't working, and how to fix it.

问题根源 #

The problem lies in how ScrollMagic's setPin() method operates. When you pin an element, ScrollMagic removes it from its original parent container and inserts it into a new fixed-position container (by default, directly as a child of <body>). This completely breaks the sibling relationship between your .box elements—each box becomes an independent child of the body (or pin container), so nth-child(even) can no longer target "every other box" like you intended.

解决方案 #

Here are two reliable fixes you can use:

方案1：通过JavaScript添加自定义类 #

Instead of relying on sibling-based selectors, manually add a class to even-numbered boxes during initialization. This ensures the style stays attached to the element no matter where it moves in the DOM.

Update your JavaScript:

let boxes = document.querySelectorAll('.box');
let controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 'onLeave',
  }
});

for (let i = 0; i < boxes.length; i++) {
  // 给偶数序号的盒子添加类（注意：i从0开始，所以用i+1判断）
  if ((i + 1) % 2 === 0) {
    boxes[i].classList.add('even-box');
  }
  new ScrollMagic.Scene({ triggerElement: boxes[i] })
    .setPin(boxes[i])
    .addTo(controller);
}

Then update your CSS to use this new class:

.box {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}
.even-box {
  background-color: #ccc;
}

方案2：将所有元素固定到同一个容器 #

If you prefer keeping the sibling selector, you can tell ScrollMagic to pin all elements to a shared parent container. This way, your .box elements stay as siblings, and nth-child(even) works as expected.

First, add a container to your HTML:

<div class="pin-container"></div>
<div class="box" data="box-1"></div>
<div class="box" data="box-2"></div>
<div class="box" data="box-3"></div>
<div class="box" data="box-4"></div>
<div class="box" data="box-5"></div>

Then update your JavaScript to specify the shared container in setPin:

let boxes = document.querySelectorAll('.box');
let pinContainer = document.querySelector('.pin-container');
let controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 'onLeave',
  }
});

for (let i = 0; i < boxes.length; i++) {
  new ScrollMagic.Scene({ triggerElement: boxes[i] })
    .setPin(boxes[i], { container: pinContainer }) // 指定共享容器
    .addTo(controller);
}

Adjust your CSS to target boxes within the container:

.box {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}
.pin-container .box:nth-child(even) {
  background-color: #ccc;
}

Either approach will resolve the issue—pick whichever fits your project structure better!

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