jQuery addClass example

Change class name on click in jQuery

by Pedro Marcano

HTML

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
  <div class="item item-5"></div>
  <div class="item item-6"></div>
  <div class="item item-7"></div>  
</div>

CSS

.container {
  width: 100%;
  height: auto;
  border: 1px solid;
}

.item {
  width: 100%;
   height: 400px;
  background: red;
  border: 1px solid white;
}

.item-4 {
  background: purple;
}

JavaScript

$(window).scroll(function(){
    var scrollPos = $(document).scrollTop();
		var stopScroll = $('.item-4').offset().top;
    
    if(scrollPos >= stopScroll) {
   			$(window).off('scroll');
        $('.container').css({
        	'height': stopScroll+'px',
          'overflow': 'hidden'
        })
    }
    
});