固定背景画像をスクロールしているときに、テキストが固定されているように見せることはできますか？

Question

Here is my fiddle

ユーザーは、固定されているように見える（表示されていない）複数のフルスクリーンイメージをスクロールできるWebページを作成しようとしています。

私のフィドルでは、私は現在、テキストが絶対的に配置されていて、親に対して相対的に移動していることがわかります。代わりに、私は、各背景画像上に表示するテキストを配置したいと思って、ユーザーがスクロールダウンすると、テキストは固定されたままになり、次のセクションで（方向に応じて）覆い隠されます。

私はposition: fixedとZ-インデックス値を使用しようとしましたが、固定要素を独自のスライドでしか表示しないようにするには、固定要素を常に見ることができました。

イメージファイルでテキストを追加しても、私の要件を満たしていません。最終的には、ダイナミックテキストとビデオ要素をこれらの固定要素にしたいと思います。あなたの洞察に感謝します。

Answer 1

純粋なCSSを使用してこれを行うことはできません。このスニペットをご覧ください。

$(window).scroll(function() { 
 
    $("section .cover-text").each(function() { 
 
    var marginTop = $(window).scrollTop() - $(this).parent().position().top; 
 
    $(this).css({ 
 
     'margin-top': marginTop 
 
    }); 
 
    }); 
 
});

#slide-1, 
 
#slide-2, 
 
#slide-3 { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.cover-1, 
 
.cover-2, 
 
.cover-3 { 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    height: 100vh; 
 
} 
 

 
.cover-1 { 
 
    background-image: url('http://placekitten.com/800/350'); 
 
    z-index: 3000; 
 
} 
 

 
.cover-2 { 
 
    background-image: url('http://placekitten.com/g/800/350'); 
 
} 
 

 
.cover-3 { 
 
    background-image: url('http://placekitten.com/800/355'); 
 
} 
 

 
.cover-text { 
 
    font-size: 25px; 
 
    color: #FFFFFF; 
 
    text-shadow: 0 0 30px #000000; 
 
    position: absolute; 
 
    left: 20%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%); 
 
    -moz-transform: translate(-50%); 
 
    -ms-transform: translate(-50%); 
 
    transform: translate(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="slide-1"> 
 
    <div class="cover-1"></div> 
 
    <div class="cover-text">Title 1</div> 
 
</section> 
 
<section id="slide-2"> 
 
    <div class="cover-2"></div> 
 
    <div class="cover-text">Title 2</div> 
 
</section> 
 
<section id="slide-3"> 
 
    <div class="cover-3"></div> 
 
    <div class="cover-text">Title 3</div> 
 
</section>