视差透明滚动效果，“窗帘” div置于视差div外部

Question

如果“窗帘” div不在固定DIV范围内，我会遇到问题。在下面的示例中，我想实现视差帘DIV的透明性，而不必将其放置在视差DIV中。

https://jsfiddle.net/0kfapw35/

我知道，如果像这样嵌套DIV可以实现：

<div class="parallax">
  <div class="parallax-curtain">
  </div>
</div>

https://jsfiddle.net/wamosjk/jfxb0kz1/

不幸的是，这对我不起作用。有可能吗？

谢谢！

Answer 1

您的示例中的问题是，如果parallax-curtain不是parallax元素的子元素，则在他后面的只是body元素，它是白色。如果您更改了body元素的background-color:red;，您会发现透明度确实适用于parallax-curtain，在您的示例中它是不可见的，因为它的颜色与后面的元素相同。

您可以通过添加parallax：https://jsfiddle.net/x837kwfb/60/

将parallax-curtain元素放在position:sticky; z-index=-1; top:0;后面。