Preact Scroll Header

Demo for https://github.com/lukeed/preact-scroll-header

by Nicholas Berlette

HTML

<script src="https://unpkg.com/preact"></script>
<script src="https://unpkg.com/preact-scroll-header"></script>

CSS

.demo-header {
	background: purple;
	text-align: center;
	color: whitesmoke;
	padding: 8px;
	/* below is critical */
	position: relative;
	will-change: transform;
	transform: translateY(0%);
	right: 0;
	left: 0;
	top: 0;
}

.demo-header h1 {
	margin: 0;
}

/* default class; adds fixed positioning */
.is--fixed {
	position: fixed;
	transform: translateY(-100%);
}

/* transition added separately to avoid flicker */
.is--ready {
	transition: transform 0.2s ease-in-out;
}

/* reveal the header; slides down */
.is--shown {
	transform: translateY(0%);
	box-shadow: 0 3px 6px rgba(0,0,0, 0.16), 0 3px 6px rgba(0,0,0, 0.23);
}

/* DEMO-ONLY */

body {
	margin:0;
	padding:0;
	font:16px/1.21 'Helvetica Neue',arial,sans-serif;
	font-weight:300;
}

.demo ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.demo li {
	height: 30px;
	padding: 0 20px;
	line-height: 30px;
	box-shadow: inset 0 -1px 0 #DDD;
}

Babel + JSX

const { h, render } = preact;
/** @jsx h */

const DATA = []; // staic data
for (let x=100; x--; ) DATA[x] = `Item #${x+1}`;

render((
	<div className="demo">
		<ScrollHeader
			className="demo-header"
			listenTo={ document.body }
			onShow={ el => console.log('SHOWN', el) }
			onHide={ el => console.log('HIDDEN', el) }>
			<h1>Menu</h1>
		</ScrollHeader>

		<ul>
			{ DATA.map(e => <li>{ e }</li>) }
		</ul>
	</div>
), document.body);