Puis-je faire en sorte que le texte semble être fixe lors du défilement d'images d'arrière-plan fixes?

Question

Here is my fiddle

Je suis en train de créer une page Web sur laquelle l'utilisateur peut faire défiler plusieurs images en plein écran qui ont des éléments overlays HTML qui semblent être fixes (ne se déplace pas sur rouleau).

Dans mon violon, vous pouvez voir que j'ai actuellement le texte positionné en absolu et ils se déplacent par rapport à leur parent. Au lieu de cela, je voudrais positionner le texte où je voudrais qu'il apparaisse sur chaque image de fond, puis quand l'utilisateur fait défiler vers le bas, le texte reste fixe et est couvert/découvert par la section suivante (selon la direction).

J'ai essayé d'utiliser les valeurs position: fixed et z-index, mais je pouvais toujours voir les éléments fixes quand je voulais que les éléments fixes soient visibles uniquement avec leur propre diapositive. L'ajout de texte avec les fichiers image ne répond pas à mes exigences, car je souhaite que les éléments texte et vidéo dynamiques soient dans ces éléments fixes. Un grand merci pour vos idées.

Answer 1

Vous ne pouvez pas faire cela en utilisant css pur. S'il vous plaît voir cet extrait.

$(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>