JSFiddle - React, Tailwind, and code Playground

by kojicomics

HTML

<body onload='main(event)'>
<header id='header' class='large'>
    <h1><img id='logo' src='' alt='KC' /></h1>
    <nav id='nav' class='large'>
        <a href='/'>HOME</a>
        <a href='/blog/'>BLOG</a>
        <a href='/portfolio/'>PORTFOLIO</a>
        <a href='/aboutme/'>SOBRE MI</a>
        <a href='/contact/'>CONTACTA</a>
    </nav>
</header>
<section class='main'>
    <p>Prueba de línea 1</p>
    <p>Prueba de línea 2</p>
    <p>Prueba de línea 3</p>
    <p>Prueba de línea 4</p>
    <p>Prueba de línea 5</p>
    <p>Prueba de línea 6</p>
    <p>Prueba de línea 8</p>
    <p>Prueba de línea 9</p>
    <p>Prueba de línea 20</p>
    <p>Prueba de línea 11</p>
    <p>Prueba de línea 12</p>
    <p>Prueba de línea 13</p>
    <p>Prueba de línea 14</p>
    <p>Prueba de línea 15</p>
    <p>Prueba de línea 16</p>
    <p>Prueba de línea 17</p>
    <p>Prueba de línea 18</p>
    <p>Prueba de línea 19</p>
    <p>Prueba de línea 20</p>
    <p>Prueba de línea 21</p>
    <p>Prueba de línea 22</p>
    <p>Prueba de línea 23</p>
    <p>Prueba de línea 24</p>
    <p>Prueba de línea 25</p>
    <p>Prueba de línea 26</p>
    <p>Prueba de línea 27</p>
    <p>Prueba de línea 28</p>
    <p>Prueba de línea 29</p>
    
</section>
</body>

CSS

header{
	background:#2980b9;
	box-shadow:0 1px 3px 3px rgba(0,0,0,0.5);
	text-align:center;
	-webkit-box-shadow:0 1px 3px 3px rgba(0,0,0,0.5);
	width:100%
}

header.large{
	padding:25% 0 0 0
}

header.short{
	margin:0;
	padding:0;
	position:fixed;
	top:0;
	z-index:10
}

header img#logo{
	left:0;
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
	position:fixed;
	right:0;
	top:0;
	width:25%;
	z-index:1
}

header nav{
	background-color:#2980b9;
	color:#fff;
	font-size:1.5em;
	font-weight:bold;
	padding:1em 2em;
	position:relative;
	z-index:10
}

header nav a{
	color:#fff;
	margin-right:.5em
}

header nav a:hover{
	cursor:pointer;
	text-decoration:underline
}

section.main{
	background-color:#fff;
	-moz-background-size:cover;
	background-size:cover;
	border-radius:.3em;
	-webkit-box-shadow:0 2px 3px 3px rgba(0,0,0,0.25);
	box-shadow:0 2px 3px 3px rgba(0,0,0,0.25);
	margin:2em auto;
	overflow:hidden;
	padding:2em;
	position:relative;
	width:80%;
	z-index:2
}

section.left{
	float:left;
	width:65%
}

header,nav,a,img,li,.button{
	transition:all 1s;
	-moz-transition:all 1s;
	-webkit-transition:all 1s;
	-o-transition:all 1s
}

JavaScript

function main(ev) {
    loadListeners();
    var header, logo, nav;
    header = document.getElementById('header');
    logo = document.getElementById('logo');
    nav = document.getElementById('nav');  
}

function loadListeners() {
    document.addEventListener('DOMMouseScroll', scrollHeader, false);
    document.onmousewheel = scrollHeader;
}

function scrollHeader(ev) {
    if (window.pageYOffset > nav.offsetTop) {
        header.className = 'short';
        logo.style.display = 'none';
    } else {
        header.className = 'large';
        logo.style.display = 'block';
    }
}