Change Element Background During Scroll

I’m trying to use this script to add the class ‘white’ to a <header> tag. For some reason, this doesn’t seem to be working.

$(window).scroll(function() {    
	var scroll = $(window).scrollTop();

	if (scroll >= 350) {
		$("header").addClass("white");
	} else {
		$("header").removeClass("white");
	}
});			

My <header> tag still does not seem to be acquiring ‘white’ class after I scroll down.

You can see site here.

I’ve tried this code as well:

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)"});
} 

and am not seeing any results. Can anyone figure why this isn’t working?

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.

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.

Ok, can you then strip out the rest of the content and make a minimal demo that reproduces your issue.
It shouldn’t be hard to get to the bottom of.

done.

I needed to put the site back to its original state. I’ve also tried, again, this code:

  <script>
jQuery(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 150) {
        $("header").addClass("white");
    } else {
        $("header").removeClass("white");
    }
}); 

</script>

and it didn’t work. So, obviously, there’s a conflict somewhere.

I was able to figure it out. I replaced all of the ‘$’ to ‘jQuery’ and that fixed the issue.

Thank you for your time, post 5.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.