Header Background when scroll

by Marius Jopen

HTML

<header class="banner">
</header>

<div class="box-1">
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
</div>


<div class="box-2">
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
</div>


<div class="box-3">
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
</div>



<div class="box-4">
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
s<br/>
</div>

CSS

.banner{
height: 100px; 
background-color: rgba(0,0,0,0);
position: fixed;
top:200;
width: 100%;
transition: 0.2s ease-in;

}


.banner-box-1 {
background-color: yellow;

  }

.banner-box-2 {
background-color: orange;

  }

.banner-box-3 {
background-color: rgba(0,0,0,0);

  }
  
.box-1 {
  background-color: blue;
}

.box-2 {
  background-color: yellow;
}

.box-3 {
  background-color: orange;
}

.box-4 {
  background-color: pink;
}

JavaScript

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    var banner = $('.banner').height();
    var box1 = $('.box-1').height();
    var box2 = $('.box-2').height();
    var box3 = $('.box-3').height();
    
    if (scroll >= box1-banner) {
        $(".banner").addClass("banner-box-1");
        }
    if (scroll <= box1-banner) {
        $(".banner").removeClass("banner-box-1");
        }
      
      
    if (scroll >= box1+box2-banner) {
        $(".banner").addClass("banner-box-2");
        }
    if (scroll <= box1+box2-banner) {
        $(".banner").removeClass("banner-box-2");
        }
    
    
    if (scroll >= box1+box2+box3-banner) {
        $(".banner").addClass("banner-box-3");
        }
    if (scroll <= box1+box2+box3-banner) {
        $(".banner").removeClass("banner-box-3");
        }

});