Change Element Background During Scroll

JavaScript
3

You have included this code snippet before the element it references.

i.e. you have:

<script>
  var t = $('#preschool-program').offset().top - 120;

  jQuery(document).scroll(function(){
    if($(this).scrollTop() > t)	{   
      $('body.index header').css({"background-color":"rgba(0,0,0,1)"});
    }
  });
</script>
...
<section id="preschool-program" class="3d-buttons">...</section>

And what you need is:

<section id="preschool-program" class="3d-buttons">...</section>
...
<script>
  var t = $('#preschool-program').offset().top - 120;

  jQuery(document).scroll(function(){
    if($(this).scrollTop() > t)	{   
      $('body.index header').css({"background-color":"rgba(0,0,0,1)"});
    }
  });
</script>

The best way to organize your code is to put all of the JavaScripts at the bottom of the page. Then you will avoid this problem altogether.

As an aside, you should really have some kind of start/stop functionality on that video.