Can I get the text to be fixed when scrolling through fixed background images?

Question

Here is my violin

I am trying to create a web page where the user can scroll through several full-screen images with HTML elements superimposed that seem to be fixed (do not scroll around).

In my violin you can see that currently I have text that is absolute and they are moving relative to their parent. Instead, I would like to place the text where I would like it to be displayed above each background image, and then when the user scrolls down, the text remains fixed and then closes / opens in the next section (depending on the direction).

I tried using the values position: fixedand z-index, but I could always see the fixed elements when I would like the fixed elements to display only with their slide.

Adding text with image files does not meet my requirements, since in the end I would like dynamic elements of text and video to be in these fixed elements. Thanks so much for your ideas.

Answer 1

You cannot do this using pure css. See this snippet.

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

Run codeHide result