Change div color when scrolling to a specific div class

user_3756781 0
Viewed 173

I am having issues when it comes to adding a background color when I scroll. Currently my code is working but it is not displaying until I scroll to the end of the div. which is background-overlay.

I would like to activate the class black the moment I scroll over the background-overlay class. Another issue is when I scroll past the div the class is not removing. Is there something I am missing with my below code?

https://jsfiddle.net/e6tfgs0a/2/

Snippet code :

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

    if (scroll >= $('.background-overlay').offset().top) { // check the offset top
        $( ".background-overlay" ).addClass( "black" );
        
    } else if(scroll >= $('.background-overlay').offset().top+$('.background-overlay').height()){ // check the scrollHeight
        $( ".background-overlay" ).removeClass( "black" );
    }
  });
});
.full-height, .page {
  height:500px;
}

.black {
  background: #000000; 
    transition: background-color 1s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
    
  </div>
  
  <section class="full-height background-overlay" >
    </section>
  
  <div class="page">
   
  </div>

scroll html jquery javascript
2 Answers

Also, to expand on Spring's answer, you can also just use .scrollTop() for the background-overlay section as well:

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

    if (scroll >= $('.background-overlay').scrollTop()) { // <-- changed this
        $( ".background-overlay" ).addClass( "black" );
        
    } else if(scroll >= $('.background-overlay').scrollTop()+$('.background-overlay').height()){ // check the scrollHeight
        $( ".background-overlay" ).removeClass( "black" );
    }
  });
});
.full-height, .page {
  height:500px;
}

.black {
  background: #000000; 
    transition: background-color 1s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
    
  </div>
  
  <section class="full-height background-overlay" >
    </section>
  
  <div class="page">
   
  </div>

user_119997480

If I Understand your question , The first condition check the would be offsettop - height of your div , and the second there where an error in condition (condition iversion) ,

also adding the transition to you .background-overlay instead of .black will have effect in both scroll up down

$(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var $divBlack = $('.background-overlay');
    
    if (scroll >= $divBlack.offset().top - $divBlack.height()) { // check the offset top
      $divBlack.addClass("black");

    } else if (scroll <= $divBlack.offset().top + $divBlack.height()) { // check the scrollHeight
      $divBlack.removeClass("black");
    }
  });
});
.full-height,
.page {
  height: 500px;
  border-bottom: 1px solid black;
}

.black {
  background: #000000;
}

.background-overlay {
  transition: background-color 2s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">


</div>

<section class="full-height background-overlay">

</section>
<div class="page">



</div>

user_29324760
Related