.layout-header {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 0.5rem 1rem;
position: sticky;
top: 0;
}
.layout-footer {
background-color: #eee;
bottom: 0;
font-size: smaller;
padding: 0.1rem 1rem;
text-align: center;
position: sticky;
}
/* -------- */
body {
margin: 0
}
.layout-title {
margin: 0;
}
.layout-main {
margin: 1rem;
}
<article>
<header class="layout-header">
<h1 class="layout-title">You Sticky Head!</h1>
</header>
<main class="layout-main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, eligendi voluptate dolor neque praesentium nisi accusantium ducimus deleniti mollitia reprehenderit, aut sunt molestiae consequuntur libero perferendis vel, inventore impedit error.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita libero nemo nulla quia assumenda dignissimos perferendis, vero rem nisi eaque repellendus accusantium iste esse maiores. Saepe aspernatur, voluptatem dolorem. Ex.</p>
</main>
<footer class="layout-footer">
<small><a href="https://www.google.co.jp/search?q=all+rights+reserved+%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%84">All rights reserved.</a></small>
</footer>
</article>