Прозрачный эффект прокрутки параллакса с разделителем «занавес», расположенным вне раздела параллакса

Question

У меня проблемы с прозрачностью моего "занавеса", если он находится вне фиксированного 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 элемента *1004*, вы увидите, что прозрачность действительно применяется к parallax-curtain, в вашем примере это просто не видно, потому что он того же цвета, что и элемент позади него.

Вы можете поместить элемент parallax позади parallax-curtain, добавив position:sticky; z-index=-1; top:0;: https://jsfiddle.net/x837kwfb/60/