JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="banner"></div>

<main>

	<nav class="drdk-topbar">
		<a href="">DR</a>
		<ul>
			<li><a href="/nyheder">Nyheder</a></li>
			<li><a href="/tv">TV</a></li>
			<li><a href="/radio">Radio</a></li>
		</ul>
		
		<button>Menu</button>
	</nav>

	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
</main>

CSS

@font-face{font-family:"gibsonLight";src:url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.woff") format("woff");font-weight:normal}@font-face{font-family:"gibsonRegular";src:url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.woff") format("woff");font-weight:normal}@font-face{font-family:"gibsonSemiBold";src:url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.woff") format("woff");font-weight:normal}@font-face{font-family:"gibsonBold";src:url("https://www.dr.dk/assets/fonts/gibson/bold/gibson-bold-webfont.woff") format("woff");font-weight:normal}@font-face{font-family:"dr-icons";src:url("https://www.dr.dk/assets/fonts/dricons/dr-icons.woff") format("woff");font-weight:normal}

* {
	padding: 0;
	margin: 0;
}

html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.block {
	margin: 10px auto;
	max-width: 600px;
	min-height: 200px;
	background-color: #CCC;
}

.banner {
	background-color: #000;
}
.banner:after {
	content: "";
	display: block;
	margin: 0 auto;
	max-width: 600px;
	min-height: 150px;
	background-color: magenta;
}

.drdk-topbar {
	position: fixed;
	position: sticky;
	_position: -webkit-sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	overflow: hidden;
	display: flex;
	flex-flow: row;
	align-items: center;
}
.drdk-topbar:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #444;
	z-index: -1;
}
.drdk-topbar ul,
.drdk-topbar button,
.drdk-topbar:after {
	animation: .3s fade-in ease-in-out forwards;
}
.drdk-topbar--hidden ul,
.drdk-topbar--hidden button,
.drdk-topbar--hidden:after {
	animation-name: fade-out;
}
.drdk-topbar > a {
	background: url(http://dev.phloe.net/dr_2016/img/dr.svg);
	background-size: 100% 100%;
	width: 78px;
	height: 16px;
	width: 117px;
	height: 24px;
	margin-left: 20px;
	text-indent: 100%;
	white-space: nowrap;
}
.drdk-topbar a {
	color: #FFF;
	font: 14px/1...

JavaScript

var block = "drdk-topbar";
var hidden;
var topbar = document.querySelector("." + block);

var scrollY = 0;

window.addEventListener("scroll", function () {
	var _scrollY = window.scrollY;
	var _hidden = hidden;
	if (_scrollY > scrollY && !hidden) {
		_hidden = true;
	}
	else if (_scrollY < scrollY && hidden) {
		_hidden = false;
	}
	if (_hidden !== hidden) {
		hidden = _hidden;
		topbar.className = block + ((_hidden) ? " " + block + "--hidden": "");
	}
	scrollY = _scrollY;
});