jQuery addClass example

Change class name on click in jQuery

HTML

<div class="grid">
          <div class="grid__row bd__bg bd__bg--red" id="01">
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla enim orci, placerat at magna maximus, luctus scelerisque neque. Mauris tempor, elit quis cursus condimentum, sapien lacus molestie lacus, et elementum ex augue et diam. In non malesuada mauris. Donec interdum dolor elementum lacus pellentesque elementum. Sed fermentum est ac lectus iaculis, et facilisis sapien eleifend. Phasellus in convallis tellus, et tincidunt leo. Nunc lobortis, tellus in sodales venenatis, metus nunc fermentum massa, id ultricies ipsum nisl eget nulla. Maecenas dignissim ipsum mi, sit amet suscipit purus tincidunt at. Nulla sed purus vitae leo placerat vehicula. Proin fermentum euismod nibh, ac mollis purus efficitur et. Sed laoreet suscipit est, et viverra enim. Mauris ac felis vel tortor tincidunt pellentesque id a dolor.</p>
            </div>
          </div>
        </div>
        <div class="grid">
          <div class="grid__row bd__bg bd__bg--orange" id="02">
            <div>
              <p>Vivamus sed diam at metus gravida porta id et ligula. Aliquam erat magna, suscipit tincidunt lectus consectetur, vehicula pulvinar sem. In pretium massa quis viverra blandit. Sed fringilla neque mollis felis scelerisque lobortis. Ut venenatis nisi id orci porttitor vehicula. Curabitur ac dignissim felis, tincidunt pharetra sem. Suspendisse lacus tortor, commodo eget sollicitudin vitae, finibus eu lectus. Phasellus egestas metus euismod orci maximus vehicula.</p>
            </div>
          </div>
        </div>
        <div class="grid">
          <div class="grid__row bd__bg bd__bg--yellow" id="03">
            <div>
              <p>Fusce sed tincidunt justo, sit amet viverra nulla. Nulla a aliquam orci, vitae bibendum leo. Aliquam erat volutpat. Curabitur mattis mollis magna sed vestibulum. Donec tristique tempor pellentesque. Donec dictum pharetra leo quis...

CSS

body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    padding-top: 100vh;
}
.grid__row {
    display: flex;
    flex-direction: row;
    position: relative;
    box-sizing: border-box;
    padding: 40px 200px;
}
.bd__bg {
    width: 100%;
    height: 100vh;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.bd__bg div {
    flex: 1 1 auto;
}
.bd__bg--red {
    background-color: firebrick;
    color: #fff;
}
.bd__bg--orange {
    background-color: darkorange;
    color: #fff;
}
.bd__bg--yellow {
    background-color: yellow;
    color: #222;
}
.bd__bg--green {
    background-color: forestgreen;
    color: #fff;
}

JavaScript

$(document).ready(function() {
	var bdBG = $('.bd__bg'),
  		bd = $('#bd');
                
	$(bdBG).each(function() {
    $(this).hide();
	});
  // $(bd).hide();
                
	$('#01').show();
});
            
$(window).scroll(function() {                
	if ($(this).scrollTop() > 200) {
			$('#01').fadeOut();
			$('#02').fadeIn();
		} else if ($(this).scrollTop() > 400) {
    	$('#02').fadeOut();
			$('#03').fadeIn();             
    } else if ($(this).scrollTop() > 600) {
    	$('#03').fadeOut();
			$('#04').fadeIn();
    } else {
    	$('#04').fadeOut();
    	// $(bd).fadeIn();
    }
});