<div class="topPanel">
  <div class="inner">
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>
    <p>Scroll to see feature titles</p>

    <h2 class="feature feature1" id="title1">Feature 1</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
      et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>

    <h2 class="feature feature2" id="myDiv">Feature 2</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <h2 class="feature feature3" id="title3">Feature 3</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  line-height: 1.;
  font-size: 1.4rem;
}
* {
  box-sizing: border-box;
}
p {
  padding: 0 2rem;
  color: #fff;
}

h2 {
  padding: 1rem 0;
  text-align: center;
  color: #fff;
}
.topPanel {
  height: 50vh;
  overflow: auto;
  background: rgba(95, 95, 95, 0.8);
  padding: 10px;
  position: relative;
  z-index: 1;
}
body:after {
  content: "";
  z-index: -1;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(http://www.reedyrace.com/images/b64d-chassis.jpg)
    no-repeat
    50%
    0%;
  transition: background 1s ease;
}
body:before {
  content: "";
  z-index: 0;
  position: absolute;
  left: 0;
  top: 50%;
  right: 0;
  bottom: 0;
  background: url(http://www.reedyrace.com/images/mask.png) no-repeat 50% 50%;
  background-size: 100% 100%;
}
.inner {
  max-width: 1280px;
  margin: auto;
}

.highlight {
  background: red;
}

.move1:after {
  background-position: 0% 50%;
}
.move2:after {
  background-position: 0% 100%;
}
.move3:after {
  background-position: 100% 50%;
}
$(document).ready(function() {
  var winHeight = $(".topPanel").height(),
    topLimit = winHeight;

  $(".topPanel").on("scroll", function() {
    $(".feature").each(function() {
      var thisTop = $(this).offset().top - $(window).scrollTop();

      if (thisTop <= topLimit) {
        $(".feature").removeClass("highlight");
        $(this).addClass("highlight");

        if ($(this).hasClass("feature1")) {
          $("body").addClass("move1");
        }
        if ($(this).hasClass("feature2")) {
          $("body").addClass("move2");
        }
        if ($(this).hasClass("feature3")) {
          $("body").addClass("move3");
        }
      }
    });
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js