<header class="scroller"></header>
<main>
<h1>Content Must Be Longer Than The Viewport Height or This Makes No Sense.</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum a natus, praesentium nesciunt recusandae excepturi qui debitis optio enim eligendi iusto quos animi. Soluta neque ad eos itaque debitis.</div>
<div>Quidem minus deserunt reiciendis temporibus quisquam! Eaque illum eligendi, perspiciatis ea animi pariatur dolores necessitatibus aliquam quos esse autem rerum possimus culpa neque sit sapiente accusantium odio! Dicta, facilis, earum.</div>
<div>Sequi, doloribus tempora sit odit dolorum, aliquam inventore. Qui libero ea iure velit iste impedit, corrupti est. Recusandae, est inventore explicabo quis accusamus ipsam repellendus nostrum soluta ad. Enim, voluptatem.</div>
<div>Eum beatae placeat voluptate. Iste pariatur aspernatur expedita voluptates, eius exercitationem nisi ratione sapiente sunt sint quo nihil sit repellendus veniam provident ea debitis atque similique iure vitae fugiat. Pariatur!</div>
<div>Dolores sunt voluptatibus qui maxime distinctio, repellendus iure animi assumenda, perferendis minima amet doloribus odit recusandae, magnam doloremque dolorum quae quas expedita ab laborum rerum mollitia. Commodi voluptatum, deleniti fugiat.</div>
<div>Minima voluptate ut facere officiis, perferendis rem beatae et tempore aperiam debitis, vel sequi asperiores placeat repellendus fuga? Dolorem, maxime eveniet, inventore excepturi fugit molestias sed minus natus placeat numquam?</div>
<div>Quam dignissimos saepe vero omnis quidem, voluptatum nisi consequatur fugiat, veniam quo, ea. Fuga ut ducimus, libero doloremque corporis labore voluptas nulla modi qui voluptate, alias fugit dignissimos quibusdam odit!</div>
<div>Nisi totam nesciunt error magnam fugit enim possimus earum commodi! Nesciunt provident deserunt totam officiis cumque consequatur ex dolorem! Accusantium mollitia laboriosam beatae perferendis ab quibusdam dolor veniam nobis amet.</div>
<div>Voluptatem voluptates officiis fuga, dolore eveniet ab praesentium doloremque numquam cum magni sapiente quaerat ea voluptatum quae explicabo similique cumque veniam id blanditiis velit itaque quidem temporibus. Illo, consequatur, doloremque.</div>
<div>Nam, omnis. Sit, dolore quia, sunt consequatur commodi alias quo repudiandae ab, rem accusantium, in molestiae. Voluptate possimus quas fugiat totam esse dignissimos! Odit quasi accusamus, iure laudantium id corporis?</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum a natus, praesentium nesciunt recusandae excepturi qui debitis optio enim eligendi iusto quos animi. Soluta neque ad eos itaque debitis.</div>
<div>Quidem minus deserunt reiciendis temporibus quisquam! Eaque illum eligendi, perspiciatis ea animi pariatur dolores necessitatibus aliquam quos esse autem rerum possimus culpa neque sit sapiente accusantium odio! Dicta, facilis, earum.</div>
<div>Sequi, doloribus tempora sit odit dolorum, aliquam inventore. Qui libero ea iure velit iste impedit, corrupti est. Recusandae, est inventore explicabo quis accusamus ipsam repellendus nostrum soluta ad. Enim, voluptatem.</div>
<div>Eum beatae placeat voluptate. Iste pariatur aspernatur expedita voluptates, eius exercitationem nisi ratione sapiente sunt sint quo nihil sit repellendus veniam provident ea debitis atque similique iure vitae fugiat. Pariatur!</div>
<div>Dolores sunt voluptatibus qui maxime distinctio, repellendus iure animi assumenda, perferendis minima amet doloribus odit recusandae, magnam doloremque dolorum quae quas expedita ab laborum rerum mollitia. Commodi voluptatum, deleniti fugiat.</div>
<div>Minima voluptate ut facere officiis, perferendis rem beatae et tempore aperiam debitis, vel sequi asperiores placeat repellendus fuga? Dolorem, maxime eveniet, inventore excepturi fugit molestias sed minus natus placeat numquam?</div>
<div>Quam dignissimos saepe vero omnis quidem, voluptatum nisi consequatur fugiat, veniam quo, ea. Fuga ut ducimus, libero doloremque corporis labore voluptas nulla modi qui voluptate, alias fugit dignissimos quibusdam odit!</div>
<div>Nisi totam nesciunt error magnam fugit enim possimus earum commodi! Nesciunt provident deserunt totam officiis cumque consequatur ex dolorem! Accusantium mollitia laboriosam beatae perferendis ab quibusdam dolor veniam nobis amet.</div>
<div>Voluptatem voluptates officiis fuga, dolore eveniet ab praesentium doloremque numquam cum magni sapiente quaerat ea voluptatum quae explicabo similique cumque veniam id blanditiis velit itaque quidem temporibus. Illo, consequatur, doloremque.</div>
<div>Nam, omnis. Sit, dolore quia, sunt consequatur commodi alias quo repudiandae ab, rem accusantium, in molestiae. Voluptate possimus quas fugiat totam esse dignissimos! Odit quasi accusamus, iure laudantium id corporis?</div>
</main>
$scroller-height: 6px;
$scroller-color: #c69;
$scroller-background: #ddd;
$body-background: white;
html,body {
margin: 0;
}
.scroller {
position: fixed;
top: 0;
height: 0;
width: 100%;
background: $body-background;
}
main {
margin-top: 0;
}
body {
background: linear-gradient(to right top,
$scroller-color 50%,
$scroller-background 50%);
//6px = height of scroller but calc won't work with variables
background-size: 100% calc(100% - 100vh + #{-$scroller-height});
background-repeat: no-repeat;
}
body:before {
content:'';
position: fixed;
top: $scroller-height;
bottom: 0;
width: 100%;
z-index: -1;
background: $body-background;
}
// additional styling
main {
font-family: monospace;
max-width: 50%;
margin: 0 auto;
font-size: 1.5em;
h1 {
color: #c69
}
div {
margin-bottom: 1em;
}
}
Also see: Tab Triggers