JSFiddle - React, Tailwind, and code Playground

by mennovanslooten

HTML

<header>I am a sticky header</header>
<div class="info">
    <p>This is a problem with sticky headers: normal "space" or "page down" keys don't work as expected, because the content you are scrolling (one page length down) to is going to be obscured by the sticky header.</p>
    <p>Example: Please take note of the bottom number on this page and imagine you want to continue reading at the next. Now press space. You'll find that number disappeared underneath the header and have to manually scroll up to pick up where you left off.</p>
</div>

CSS

header {
    position: fixed;
    background: black;
    color: white;
    line-height: 100px;
    left: 0;
    top: 0;
    right: 0;
    text-align: center;
}

body {
    padding: 120px 20px 20px;
}

.info {
    position: fixed;
    right: 0;
    top: 120px;
    width: 200px;
    padding: 10px;
    background: gray;
}

JavaScript

var i = 100;
while (i--) {
    $('body').append('<div>' + i + '</div>');
}