Odtnhj

const secondBlock = document.getElementById('content2')
const header = document.getElementsByTagName('header')
const headerHeight = 61

function setHeader () 
 const scrollPoint = window.pageYOffset + headerHeight

 let blockPoint = 61 - (scrollPoint - secondBlock.offsetTop)
 if (blockPoint <= 0) blockPoint = 0 

 if (scrollPoint > secondBlock.offsetTop) 
 header[0].style = `max-height: $blockPointpx;`
 else 
 header[0].style = `max-height: $headerHeightpx;`
 
 window.requestAnimationFrame(setHeader)


window.requestAnimationFrame(setHeader)

* 
 box-sizing: border-box;
 margin: 0;
 padding: 0;


header 
 display: block;
 font-size: 20pt;
 height: 61px;
 line-height: 61px;
 padding-left: 10px;
 position: fixed;
 top: 0;
 width: 100%;


header#first 
 background: #8292C3;
 color: #000;
 overflow: hidden;
 z-index: 10;


header#second 
 background: #82C3B9;
 color: #fff;
 z-index: 9;


section 
 height: 500px;
 padding: 100px 10px;
 position: relative;


#content1 
 background: #96A6D5;


#content2 
 background: #99D6CC;

<header id='first'>Logo - <small>scroll down to see the magic!</small></header>
<header id='second'>Logo - <small>scroll down to see the magic! COOL!</small></header>

<section id='content1'>
 <h1>Content</h1>
 <p>Goes here!</p>
</section>
<section id='content2'>
 <h1>Content</h1>
 <p>Goes here!</p>
</section>

window.onscroll = function()
		var top = window.scrollY;
		console.log('Top: ' + top);
 var header = document.getElementsByTagName('header');
 var offset = header.innerHeight; //changed offset to be dynamic, so it works on mobile screens.
		if(top > offset)
		 header[0].classList.remove('top');
		 header[0].classList.add('scrolled');
		 else 
 header[0].classList.remove('scrolled');
 header[0].classList.add('top');
 
	;

* 
 box-sizing: border-box;
 margin: 0;
 padding: 0;

body 
	position: relative;

header 
 width: 100%;
 position: fixed;
 height: 75px;
 display: block;
 top: 0;
 z-index: 100;
 font-size: 20pt;
 padding: 15px 10px

header.top 
 background: #222;
 color: #fff;
 transition: all 0.3s ease;


header.scrolled 
	background: #555;
	color: #e0e0e0;
transition: all 0.3s ease;


.green 
 background: green;
 color: #000;
 z-index: 2


.red 
 background: red;
 color: #fff;
 z-index: 1


section 
 position: relative;
 height: 800px;
 padding: 100px 10px


#content1 
 background: #D9D9D9;
 z-index: 1


#content2 
 background: #9FDAD0;
 z-index: 2

	<header class="top">Logo</header>
	<section id='content1'>
 <h1>Content</h1>
 <p>Goes here!</p>
</section>
<section id='content2'>
 <h1>Content</h1>
 <p>Goes here!</p>
</section>