Untitled

<html>
<head>
<style>
*{
margin:0px;
padding:0px;
}

#headfirst{
border:1px solid #000;
height:140px;
width:100%;
background:green;
}

.logo {
 border:1px solid #000;
 height:80px;
 width:100%;
 background:#363636;
 transition: all 1s;
}

.small-logo {
 height:65px;
 width:100%;
 background-color: DeepSkyBlue;
}

#headtwo{
position:sticky;
top:0;

}

#content{
height:8000px;
width:100%;
background:red;
}
</style>


</head>
<body>

<script>

document.addEventListener('scroll', function() {
	let totalScrolled = document.documentElement.scrollTop,
  		logo = document.getElementsByClassName('logo')[0];

	if(totalScrolled > 140) {
  	logo.classList.add('small-logo')
  } else {
  	logo.classList.remove('small-logo')
  }
})
</script>

<div id="headfirst"></div>
<div id="headtwo" class="logo"></div>
<div id="content"></div>


</body>
</html>