Edit on
<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;
  }
}
View Compiled
Rerun