Can I make text appear to be fixed while scrolling over fixed background images?

Question

Here is my fiddle

I'm trying to create a web page where the user can scroll through multiple full-screen images that have overlayed HTML elements that appear to be fixed (not move on scroll).

In my fiddle, you can see that I currently have the text positioned absolute and they move relative to their parent. Instead, I would like to position the text where I would like it to appear over each background image, then when the user scrolls down, the text stays fixed and then is covered/uncovered by the next section (depending on direction).

I did try to use position: fixed and z-index values but I could always see the fixed elements when I'd like the fixed elements to only be visible with its own slide.

Adding text with the image files does not meet my requirements as ultimately I'd like dynamic text and video elements to be in these fixed elements. Much thanks for your insights.

Answer 1

You can't do this using pure css. Please 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>