JSFiddle - React, Tailwind, and code Playground

by André Scala

HTML

<header id="menuprincipal">
		<div id="logotipo">Dr. Francisco J. P. Silva</div>
		<nav>
			<ul>
				<li><a href="#">INÍCIO</a></li>
				<li><a href="#">SERVIÇOS</a></li>
				<li><a href="#">COMO CHEGAR</a></li>
				<li><a href="#">CONTATOS</a></li>
			</ul>
		</nav>
		<div class="bannertopo">
				<img src="http://s14.postimg.org/4gr5h05oh/teste_banner.jpg" alt="Banner topo">
		</div>
	</header>

	<section id="conteudo">
		<div id="servicos">
			<script> 
			    for(var i = 0; i < 40; i++){ document.write("<h2>"+(i+1)+". Dummy page content ... </h2>"); }
			</script>
		</div>

CSS

@CHARSET "UTF-8";

#header {
	position: fixed;
	top: 0px;
	width:100%;
	height: 120px;
	background: #06C;
	color: #FFF;
	font-size: 23px;
	padding-top: 50px;
	transition: height 0.3s linear 0s, padding 0.3s linear 0s;
	overflow:hidden;
}
#header > #bannertopo {
	position: absolute;
	bottom: 0px;
	width:100%;
	background: #004A95;
	height: 50px;
	transition: height 0.3s linear 0s;
}
#conteudo { margin-top: 230px; }

JavaScript

var header, bannertopo, yPos;
function yScroll(){
	header = document.getElementById('header');
	bannertopo = document.getElementById('banner-topo');
	yPos = window.pageYOffset;
	if(yPos > 150){
		header.style.height = "36px";
		header.style.paddingTop = "8px";
		bannertopo.style.height = "0px";
	} else {
		header.style.height = "120px";
		header.style.paddingTop = "50px";
		bannertopo.style.height = "50px";
	}
}
window.addEventListener("scroll", yScroll);