Sticky header on scroll up

index.html

<header class="header" data-scroll>
  <div class="container">
    <h1>Header</h1>
  </div>
</header>
<main class="main">
  <div class="container">
    <h2>Check out <a href="https://scroll-out.github.io/">scroll-out.github.io</a> for info and documentation.</h2>
    
    <h3>Placeholder text👇 </h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptates praesentium earum eveniet optio, blanditiis libero omnis suscipit veniam cum.</p>
    
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis quod et quo velit accusantium dignissimos, est mollitia unde dolore quae cum, dicta repudiandae distinctio inventore quidem corporis similique laborum tempore, tenetur atque cupiditate. Sint id ratione expedita accusantium impedit cumque dignissimos fugiat, voluptate nihil officiis asperiores, ipsa ipsum deleniti doloremque harum sunt in minima consectetur placeat fugit libero dolores quia quod tempore. Quidem molestiae odio, quas architecto dolore ipsam ratione nostrum fugit iusto exercitationem labore quis rerum, temporibus quibusdam veniam.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptates praesentium earum eveniet optio, blanditiis libero omnis suscipit veniam cum.</p>
    
    <h3>Ipsum amet</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptates praesentium earum eveniet optio, blanditiis libero omnis suscipit veniam cum.</p>
    
  </div>
</main>
    
<div class="footer">
  <div class="container">
    <h1>Footer</h1>
    <p>Now let's go 👆 to see the header come back</p>
  </div>
</div>

script.js

ScrollOut({
  cssProps: true,
  threshold: 0.2
});

scripts

<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>

sticky-header-on-scroll-up.markdown

Sticky header on scroll up

Display a sticky header when scrolling up. Uses scroll-to

A Pen by Ingvi on CodePen.

License.

dEMO https://codemyui.com/scroll-up-to-reveal-header-and-scroll-down-to-hide/

style.css

.header {  
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 400ms cubic-bezier(.25,.37,.17,.96); 
}

/* When header is not in viewport we hide it */
.header[data-scroll="out"] {
  transform: translatey(-100%);
}

/* When moving up and header we show it */
[data-scroll-dir-y="-1"] .header {
  transform: translatey(0);
}

/* 
* Base styles 
*/
:root {
  --color-bone: #f2f4fb;
  --color-pink: #d22780;
  --color-yellow: #f8b500;
  --color-purple: #5e227f;
}

html {
  font-size: 110%;
}

body {
  margin: 0;
  font-family: Montserrat, sans-serif;
  line-height: 1.45;
  background-color: var(--color-bone);
}

a {
  color: var(--color-yellow)
}

.container {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.header {
  padding: .5em 0;
  color: #fff;
  background-color: var(--color-pink);
}

.main {
  padding: 7.5em 0 4.5em;
}

.footer {
  padding: .5em 0;
  color: #fff;
  background-color: var(--color-pink);
}

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700" rel="stylesheet" />