cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
<!-- The bit to stick -->
<header class=sticky_header>
  <nav>
    <h2>Site header: logo pretties and site nav</h2>
  </nav>
</header>



<main>

  <h1>Performant sticky header for 2017</h1>

  <p class="intro_copy noSticky"><code>position: sticky</code> is unsupported in this browser</p>
  
  <p class=intro_copy>Hides the site header on scroll down, reinstates on scroll up, while producing <strong>zero</strong> visual jank.</p>

  <ul class=intro_features>
    <li>Silky smooth at a steady 60fps</li>
    <li>Minimal, modern ES6, vanila JavaScript</li>
    <li>Hardware accelerated GPU animation</li>
    <li><code>position: sticky</code></li>
    <li>Scroll events avoided via <code>requestAnimationFrame()</code></li>
  </ul>
  
  <p class=body_copy>
    Current status (16/06/2017): in testing&hellip;<br> 
    Mac: Firefox, Chrome, Opera &amp; Safari &equiv; Kool-Aids.<br>
    Can I Use: <a href="https://caniuse.com/#search=position%3Asticky"><code>position: sticky</code></a>
    &ndash; Can I Use: <a href="https://caniuse.com/#search=%40supports"><code>@supports</code></a>
    &ndash; Can I Use: <a href="https://caniuse.com/#search=es6"><code>ES6</code></a>
  </p>

  <p class=body_copy>Based upon Marius Craciunoiu's <a href="https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c">Hide header on scroll down, show on scroll up</a>. Advice taken from  Google Chrome UI elements <a href="https://developers.google.com/web/updates/2016/12/performant-parallaxing">Performant parallaxing</a> and Maxime Dantec's <a href="https://gist.github.com/Warry/4254579#how-to-make-faster-scroll-effects">How to make faster scroll effects</a>.</p>
  

<p class=smaller><a target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/public/?grid_type=list#">Pens by Mike Foskett</a> &mdash; <a target=_blank title="[new window]" href="https://websemantics.uk/">webSemantics</a></p>
  
  <div class=body_copy>
    <h2>Content to encourage scrolling</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula ultrices ipsum, dignissim faucibus arcu congue in. Cras fermentum neque ornare, consectetur eros et, malesuada dui. Fusce arcu diam, luctus quis porttitor sed, ullamcorper consectetur odio. Duis lacinia eu felis quis fringilla. Integer vel orci vitae metus scelerisque varius. Praesent varius facilisis erat, a pellentesque sapien fermentum sed. Ut sit amet nibh blandit, finibus diam vitae, commodo massa. Donec pulvinar dui efficitur, auctor justo sit amet, pulvinar purus. Praesent consectetur leo diam, quis consectetur nisl semper eget. Vestibulum rutrum sed dolor id pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vulputate augue et est ullamcorper, tempor sagittis nibh faucibus. Sed tempor condimentum auctor. Curabitur luctus tincidunt eros, ut blandit massa placerat bibendum. Sed molestie tincidunt purus non ornare. Pellentesque pellentesque faucibus varius.
    </p>
    <p>
    Vestibulum et leo justo. Duis a enim ligula. Donec velit ligula, lobortis eget massa sed, placerat molestie metus. Nulla facilisi. Fusce vestibulum mi ligula, nec convallis justo consectetur nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed semper tempor mollis. Maecenas enim mauris, congue dignissim lobortis a, consectetur id libero. Suspendisse non commodo mi. Donec non bibendum urna. Duis vitae enim vel mi eleifend commodo. Proin facilisis enim dictum mollis pellentesque. Vivamus non velit odio. Sed dictum egestas lectus eget ullamcorper. Mauris tincidunt vestibulum dui.
    </p>
    <p>
    Suspendisse eu sollicitudin tortor. Curabitur sed nunc vel purus accumsan faucibus. Cras porta lectus ac neque maximus interdum. Proin risus justo, tempor eu imperdiet ut, finibus eu leo. Suspendisse tristique venenatis mi, ut finibus odio pellentesque sit amet. In et ipsum in nisl consequat fringilla. Mauris sagittis et diam at elementum. Maecenas tincidunt pretium sapien nec accumsan. Nam vitae dictum lectus, sit amet pretium ligula. Donec id semper odio. Vestibulum efficitur tortor sit amet venenatis lobortis. Proin et bibendum justo. Sed in ultrices augue, a tincidunt erat.
    </p>
    <p>
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec mauris quam, accumsan mollis ultrices quis, cursus quis mauris. Proin nisl risus, dignissim eu dapibus ac, finibus non nisl. Praesent ornare eu ex vitae volutpat. Nunc fringilla faucibus porta. Quisque luctus augue id finibus luctus. Morbi quis volutpat diam. Aliquam commodo, lacus at vehicula cursus, dui leo egestas lorem, sed aliquet felis lectus eget nunc. Donec sit amet odio et orci mattis pulvinar in eu dolor. Suspendisse potenti. Vestibulum gravida tellus a facilisis fermentum. Integer mollis ex quis orci maximus, lacinia scelerisque augue egestas. Donec ultrices leo tortor, rhoncus congue ante cursus quis.
    </p>
    <p>
    Donec gravida cursus lorem, eu mollis diam euismod eu. Aliquam fermentum auctor magna sed maximus. Pellentesque in ornare mauris, quis tempus nulla. Vivamus elementum finibus sagittis. Integer libero dui, congue in fermentum quis, mollis quis tortor. Ut egestas massa eget viverra sollicitudin. Suspendisse lectus dui, ullamcorper quis risus sed, blandit sagittis diam.
    </p>
    <p>
    Donec feugiat diam vitae urna feugiat, ut vehicula urna aliquet. Duis ullamcorper congue egestas. Aenean hendrerit ipsum eget leo blandit ornare. Phasellus gravida augue non nisi aliquam, et pretium nunc dapibus. Donec finibus porttitor enim, in dapibus augue pulvinar at. Nulla at diam mi. Cras congue lectus et magna laoreet elementum. Vivamus mattis turpis nibh, vitae rutrum mauris venenatis ac. Vivamus ullamcorper et erat eu ullamcorper. Vivamus egestas vitae magna vel ultricies. Etiam fringilla tellus quis nibh molestie, at rutrum tellus sollicitudin. In a dolor quis felis molestie pulvinar ac vitae lacus. Pellentesque porta tellus vel elit auctor, sed fringilla ex aliquam. Pellentesque pellentesque feugiat quam, sit amet dignissim neque finibus a. In hac habitasse platea dictumst. Integer euismod massa et eros interdum sagittis iaculis eget turpis.
    </p>
    <p>
    Nunc sit amet blandit velit, at dapibus purus. Duis aliquam lacus nec ex lobortis dapibus. Proin auctor dolor a nisi semper tempus. Maecenas a semper lorem. Maecenas dictum libero ac condimentum ultrices. Aenean vestibulum vitae augue ut tincidunt. In lectus eros, mattis at ligula eu, aliquet accumsan tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </p>
    <p>
    Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed consectetur nisi vel tortor commodo sagittis. Aliquam vehicula dignissim dictum. Sed interdum volutpat ligula, vitae molestie ante mollis a. Aenean luctus elit orci, a gravida turpis accumsan vel. Curabitur vel sem ut ligula commodo congue nec vitae diam. Maecenas ac nisl viverra, rhoncus mi quis, gravida dolor. Maecenas fermentum dui libero, ut semper sem auctor ut. Nullam consectetur ex non neque suscipit dignissim. Maecenas aliquet imperdiet dignissim. Nam viverra ligula non finibus dignissim. Ut aliquam consequat nisi, et sollicitudin orci pharetra non. Curabitur ultrices turpis eu mi laoreet imperdiet. Suspendisse vel massa vel nisi sagittis sagittis ac ac quam.
    </p>
    <p>
    Donec ac mauris orci. Sed ut risus id mi viverra sollicitudin vel id mi. Duis tincidunt mauris ut ligula vulputate posuere. In placerat ipsum augue, at pellentesque diam congue quis. Praesent pharetra tellus elit, eu sodales metus pretium sit amet. Quisque sit amet ipsum non augue pulvinar efficitur vel quis justo. Vivamus at metus sit amet massa dictum suscipit ut id orci. Aenean vel pellentesque ipsum, vitae vestibulum tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <p>
    Curabitur elementum, elit vel varius porta, felis enim facilisis urna, quis consequat tellus ipsum ac ante. Donec in velit in nunc hendrerit fringilla eget vel orci. Fusce in erat eget augue viverra efficitur. Nullam posuere hendrerit libero eu hendrerit. Vivamus ornare mauris et imperdiet tempor. Ut pellentesque accumsan orci eu semper. Integer sed leo in purus rutrum euismod non eu mi. Morbi ullamcorper magna et risus pretium, ut tincidunt dolor ultricies. Duis id dictum leo, sed faucibus turpis. Aenean ullamcorper, urna ut aliquam auctor, sem libero porta mi, non sagittis nulla dui id ante. Morbi non pharetra lacus. Phasellus rhoncus orci quis ex dictum suscipit.
    </p>
    <p>
    Etiam vel lacus urna. Donec sit amet turpis nisl. Sed vulputate libero nec arcu sollicitudin porta. Cras vel mollis mauris, eget mattis risus. Curabitur pharetra, sapien ac pharetra ultricies, augue quam fermentum sem, quis vulputate tellus quam sit amet nunc. Pellentesque leo tellus, ullamcorper nec consectetur quis, laoreet et orci. Vestibulum facilisis mattis erat, eu sodales nulla fringilla eu. Donec finibus non leo et vestibulum.
    </p>
    <p>
    Sed finibus laoreet tristique. Phasellus nec blandit urna. Donec euismod semper massa, et fermentum ligula fringilla in. Vivamus interdum eleifend lacus eget varius. Sed quis consectetur ante, et rutrum erat. Quisque sit amet viverra odio, vel pulvinar tellus. Donec non consectetur nibh. Nunc vitae nunc finibus quam tincidunt accumsan. Nullam eget mi vestibulum, egestas erat a, ultrices est. Duis quis tortor sem. Maecenas est nisl, dignissim sit amet facilisis sed, ornare sit amet nunc. Aenean blandit vel tortor ac sagittis.
    </p>
    <p>
    Sed tincidunt vitae dolor sit amet feugiat. Fusce dapibus hendrerit velit in fringilla. Praesent at turpis rhoncus, fermentum felis sit amet, aliquet eros. Praesent nec tortor ut mi mattis volutpat. Fusce eget tempus ipsum. Aenean tincidunt interdum sapien non commodo. Pellentesque eget mollis lacus.
    </p>
    <p>
    Phasellus ornare quam pellentesque, elementum dui id, mattis odio. Maecenas pellentesque interdum lectus. Maecenas placerat feugiat dignissim. Aenean luctus efficitur porttitor. Donec facilisis nec lectus in blandit. Duis sed ex dolor. Mauris tincidunt placerat arcu in fermentum.
    </p>
    <p>
    Aenean pellentesque, erat et consequat venenatis, lectus lectus elementum dolor, non eleifend nibh dui in urna. Quisque at vulputate libero. Sed eros dui, malesuada non gravida nec, mollis sed velit. Aliquam et eleifend odio. Phasellus mauris diam, porta nec tellus nec, feugiat commodo risus. Fusce ornare sed dui ut sagittis. Proin in imperdiet purus, eu egestas erat. Ut pulvinar erat non feugiat blandit. In accumsan tellus sit amet nunc tincidunt, eget laoreet neque aliquam. Pellentesque porttitor dignissim ipsum. Integer efficitur dapibus turpis, non efficitur sapien rhoncus eget. Nullam lacinia mollis ultrices.
    </p>
    <p>
    Etiam ac nunc a orci maximus cursus ac tincidunt lacus. In non arcu erat. Aenean ac nisl libero. Curabitur maximus leo fermentum, condimentum orci dignissim, bibendum felis. Integer sed mi leo. Praesent ac ex id lectus dictum egestas. Donec tempus leo id ex molestie, nec semper sapien malesuada. Proin ullamcorper tortor non est fermentum sagittis at at diam. Maecenas aliquam nunc sed quam tincidunt, a tincidunt nulla placerat. Proin a dictum lacus. Morbi in erat mauris. Phasellus faucibus eget sem in euismod.
    </p>
    <p>
    Curabitur nec rutrum lectus. Integer vel sollicitudin felis, vitae tempus metus. Phasellus ligula massa, suscipit eu nibh non, elementum dignissim arcu. Aenean a mattis felis. Integer at elementum quam. Proin accumsan felis justo, at iaculis mauris blandit vel. Sed imperdiet neque porttitor, sodales felis vitae, semper odio. Integer ac massa volutpat, placerat nunc non, maximus nisl.
    </p>
    <p>
    Vivamus hendrerit lectus ut massa fringilla, id dapibus tortor sollicitudin. In commodo lacus diam, et tristique enim rhoncus ac. Etiam porttitor mattis orci sit amet maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec fermentum elit sit amet ultrices dapibus. Duis eu iaculis justo. Praesent ut felis sem. Duis sagittis eros magna, quis suscipit tortor sollicitudin non. Aliquam et metus nec justo sodales facilisis. Vivamus vehicula velit nulla, nec porta purus aliquet sit amet.
    </p>
    <p>
    Sed at bibendum nunc. Phasellus tempor, felis et pulvinar aliquam, nulla magna pharetra turpis, id tempus enim urna eu nulla. Aenean semper orci a turpis elementum sodales. Donec interdum urna nec neque eleifend dictum. Duis vehicula accumsan cursus. Vivamus convallis ipsum non erat ornare, ac maximus felis convallis. Quisque a pellentesque tellus. Praesent sit amet feugiat lacus, et dapibus velit. Ut vitae ipsum at est egestas tristique in sed ipsum. Etiam et mauris congue, elementum neque in, scelerisque libero. Morbi diam metus, malesuada vehicula placerat ornare, dapibus eget leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus lacus nibh, lobortis ut cursus nec, blandit sit amet nunc. Nunc pharetra varius tortor, id feugiat diam varius et.
    </p>
    <p>
    In molestie dui at consectetur scelerisque. Proin in laoreet velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ac aliquet augue. Aenean tellus velit, cursus eu fringilla at, viverra id ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed hendrerit, libero vitae consequat bibendum, nibh orci lacinia quam, at sodales elit ligula nec elit. Sed semper bibendum dolor eu malesuada. Nunc semper nulla justo, ac semper mi porttitor sit amet. Suspendisse non massa vitae tortor mollis blandit vel volutpat nisl. Pellentesque auctor tellus est, in faucibus risus suscipit vitae. Quisque auctor nisi sed nulla semper, vitae posuere urna fermentum. Fusce eleifend leo et scelerisque vestibulum. Proin hendrerit ipsum nec risus malesuada, porta fermentum nunc convallis. Sed commodo sodales est, eleifend ullamcorper diam tempor non.
    </p>
    <p>
    Duis elementum imperdiet ultricies. Curabitur non turpis in dolor sodales ultrices. Fusce lobortis enim varius mauris varius sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo felis tellus, sed molestie tellus egestas sollicitudin. Suspendisse nec molestie dolor, a tincidunt massa. Quisque sed auctor risus. Suspendisse potenti. Vivamus egestas massa sed mi varius rhoncus. Donec vestibulum ante ante, sit amet porttitor mauris finibus a. Aliquam tincidunt quis enim vel dapibus. Sed sed aliquet metus. Etiam pharetra accumsan magna quis gravida.
    </p>
    <p>
    Mauris aliquet massa vitae magna pellentesque, et hendrerit justo auctor. Maecenas dignissim sed ex sollicitudin lacinia. Vivamus consequat orci neque, sed lobortis tellus sodales ac. Sed dignissim odio ut elementum vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet nulla eu dignissim aliquam. Quisque dignissim finibus elit ut molestie. Donec et tortor metus. Suspendisse in mauris ligula. In hac habitasse platea dictumst. Aliquam varius, mi sed bibendum iaculis, sapien urna congue libero, et sollicitudin magna nulla in nisi. Nunc luctus, velit quis posuere rhoncus, eros nisl euismod orci, quis egestas dui erat non ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi porttitor ligula sed posuere lobortis. Aenean ante velit, pellentesque quis arcu at, pellentesque porttitor eros. Nam quam leo, viverra id pretium ac, scelerisque eu nisl.
    </p>
    <p>
    Mauris cursus bibendum urna at aliquam. Curabitur consectetur odio libero, vel eleifend lectus tempor a. Proin ac ultricies eros. Maecenas rutrum, sapien sed cursus laoreet, purus ipsum porta nisi, ut rutrum tellus ligula ac nunc. Duis eget eros fermentum, hendrerit mi et, luctus nulla. Curabitur ligula elit, dictum eget felis nec, fringilla pharetra sapien. Integer viverra mattis sapien, ut malesuada ligula sollicitudin quis. Ut pulvinar erat tellus, hendrerit gravida nisl elementum vel. Vivamus ut interdum arcu, id maximus ligula. Mauris consequat velit quam, eu imperdiet odio pharetra nec. Curabitur faucibus at urna nec faucibus. Fusce vitae ullamcorper tortor.
    </p>
    <p>
    Vestibulum auctor turpis a nulla sagittis, et consequat lorem imperdiet. Nam in leo sit amet tellus semper consequat. In posuere dapibus tortor, sed malesuada dui placerat sed. Ut tincidunt euismod lectus sed maximus. Ut auctor ultricies velit ut sagittis. Nullam erat libero, accumsan vitae interdum non, maximus nec sem. Aenean malesuada volutpat est ac posuere.
    </p>
    <p>
    Morbi nec felis non mi placerat sodales. Vestibulum et porta purus, sit amet sagittis massa. Proin sit amet lacus euismod, volutpat orci nec, eleifend quam. In sit amet lobortis eros, non auctor enim. Phasellus et nibh rhoncus, vestibulum nibh sed, dignissim augue. In ut facilisis risus. In quis tempus nisl. Donec porta pulvinar commodo. Pellentesque posuere facilisis nisi ut blandit. Ut at iaculis nibh.
    </p>
    <p>
    Phasellus in nunc ac purus fringilla lobortis a nec ipsum. Nullam vitae efficitur erat, eget lobortis lorem. Donec consectetur mi eget lectus molestie tincidunt. Cras vehicula maximus augue at malesuada. Nunc id odio viverra, egestas dolor nec, iaculis nisl. Sed consequat nisi vel lorem aliquet vehicula. Vestibulum mattis lorem at justo viverra, eget dictum felis semper. Nulla facilisi. Aliquam aliquam varius velit, vitae auctor ex pellentesque lobortis. Fusce in odio luctus, fringilla odio vel, sodales libero. Nunc ante diam, mattis a nulla non, pharetra suscipit diam. Aliquam ac ante lacinia, rutrum arcu maximus, pellentesque libero. Vivamus quam erat, tempus quis mattis et, malesuada quis tellus. Curabitur lacinia massa et ullamcorper ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
    </p>
    <p>
    Donec ut tempor neque. Nulla ut aliquet dui. Nullam pretium nibh justo, eget vestibulum ligula gravida eget. Nam eu finibus velit, eget pellentesque nibh. Vestibulum pretium vestibulum elit quis pretium. Integer in sapien ac est iaculis maximus. Maecenas fermentum nisi ut lobortis dictum. Aenean a ultricies metus.
    </p>
  </div>
  
</main>
            
          
!
            
              /* Generics */
:root {
  --white:       #fff;
  --off-white:   #eee;
  --base:        hsla(286, 18%, 23%, 1);
  --base-dark:   hsla(286, 18%, 13%, 1);
  --base-shadow: hsla(286, 18%, 13%, .4);
  --warning-clr: #c00;
}
body {
  margin:0;
  font-family: sans-serif;
  line-height: 1.5;
  background-color: var(--off-white);
}
main  {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='1200' height='256' viewBox='0 0 1200 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4'%3E%3C/feTurbulence%3E%3C/filter%3E%3C/defs%3E%3Crect height='256' width='1200' filter='url(%23noise)' opacity='.5'/%3E%3C/svg%3E");
}
h1, h2 {
  font-weight: 100;
  margin: 0;
  text-align: center;
  padding: 1rem 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1 {
  font-size: 2rem;
  padding: 2rem 0 1rem;
}
.intro_copy {
  margin: 0 auto 1rem;
  padding: 0 1rem;
  max-width: 40rem;
  font-size: 1.25rem;
}
.intro_features {
  margin: 1rem auto;
  padding: 0 1rem;
  max-width: 24em;
  font-size: larger;
}
.body_copy {
  padding: 0 1rem;
  margin: 2rem auto 0;
  max-width: 40rem;
  border-bottom: 1px solid transparent;
}

.smaller {
  margin: 2rem auto;
  max-width: 39rem;
  text-align: center;
  border: 1px solid var(--base);
  padding: .5rem;
}
header {
  color: var(--white);
  background-color: var(--base);
  padding: 1rem;
}
.noSticky {
  color: var(--warning-clr);
}
@supports (position: sticky) or (position: -webkit-sticky) {
  .noSticky {
    display: none;
  }
}



/* This is all the CSS actually required: */

/* Because position: sticky is used there is no need to reserve space where it normally resides */
@supports (position: sticky) or (position: -webkit-sticky) {
  .sticky_header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--base-dark);
    box-shadow: 0 .25rem .25rem var(--base-shadow);
    will-change: transform;
    transform: translateY(0);
    transition: transform .4s ease-out;
  }
  .sticky_header-hidden {
    transform: translateY(-100%);
  }
}
            
          
!
            
              // Helper function:
var supportsES6 = function() {
  try {
    new Function("(a = 0) => a");
    return true;
  }
  catch (err) {
    return false;
  }
}();



var StickyHeader = (function (window, document) {

  // version 3.0 - MJF @ websemantics.uk 2017

  "use strict";
  if (!supportsES6) {return false;}

  const stickyClass = "sticky_header";
  const header = document.querySelector("." + stickyClass);
  const hiddenClass = stickyClass + "-hidden";
  
  // The amount of downward movement before header is hidden
  const downTolerance = 8;
  let hasScrolled = false;
  let lastScrollTop = 0;

  var _redraw = function () {

    // This is costly to performance but unavoidable
    const pageY = window.scrollY;

    // Put it away
    if (pageY > (lastScrollTop + downTolerance) ) {
      header.classList.add(hiddenClass);
    }

    // Pull em down
    if (pageY < lastScrollTop || pageY <= 0) {
      header.classList.remove(hiddenClass);
    }

    lastScrollTop = pageY;
    hasScrolled = false;
  };

  // Important: keep this function as performant as possible!
  var _onScroll = function () {
    if (!hasScrolled) {
      window.requestAnimationFrame(_redraw);
    }
    hasScrolled = true;
    window.requestAnimationFrame(_onScroll);
  };

  _onScroll();

}(window, document));
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console