Change Element Background During Scroll

JavaScript
4

Taking your advice:

<section id="preschool-program" class="3d-buttons">
<div class="container">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 wow slideInLeft">
<h2>Preschoolers</h2>
<p>Our Preschool programs are specially designed to meet the needs of children in their formative years. We emphasize fun and fitness through gymnastic-oriented activities.</p>
<p class="btn_perspective"><a class="butn btn-3d btn-3dc" href="index.php?option=com_content&amp;view=article&amp;id=193&amp;Itemid=279">Learn More</a></p>
</div>
</div>
       <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>

The results are still the same: no change.