Scroll-away header

script.js

/**
 * Header animation with requestAnimationFrame debounce
 * https://www.html5rocks.com/en/tutorials/speed/animations/
 */
(function($) {
  $(document).ready(function() {
    var lastKnownScrollY = 0;
    var lastUpdatedScrollY = 0;
    var scrollCheck = false;
    var showingHeader = false;

    
    /**
     * Calculate header state
     */       
    function updateHeaderPosition() {
      var currentScrollY = lastKnownScrollY;
      var $header = $('.banner');
      var headerHeight = $header.outerHeight();
      var headerOffsetTop = $header.position().top; 
      var scrollingDown = true; // scroll direction
      var nearTopParallaxFactor = 1.8; // 1 => 1-1 scroll, > 1 => slower scroll-away
      var nearTop = ((currentScrollY / nearTopParallaxFactor) < headerHeight);

      if (currentScrollY < lastUpdatedScrollY) {
        scrollingDown = false;
      }
      
      scrollCheck = false;  // update to capture next animation frame

      // near the top?
      if ( nearTop ) { // if we are near to the top...
        var newPositionY = currentScrollY / nearTopParallaxFactor;
        if (currentScrollY === 0 || !showingHeader) { //...and we are either at the very top of the page OR not already showing the header...
          // ...parallax the header
          $header.removeClass('has-transition');
          showingHeader = false;
          $header.css('transform', 'translateY(-' + newPositionY + 'px)');
        }
      } else { // we are not near the top so...
        $header.addClass('has-transition');
        if (scrollingDown) { // ...if scrolling down, hide the header
          showingHeader = false;
          $header.css('transform', 'translateY(-' + headerHeight + 'px)');
        } else { // ...if scrolling up, show the header
          showingHeader = true;
          $header.css('transform', 'translateY(0)');
        }
      }

      // update globals
      lastUpdatedScrollY = currentScrollY;
    }

    
    /**
     * Update scroll position variable
     */
    function onScroll() {
      lastKnownScrollY = window.scrollY;
      
      if (!scrollCheck) {
        requestAnimationFrame(updateHeaderPosition);
      }
      
      scrollCheck = true; // update to block capture of animation frames
    }
    
    window.addEventListener('scroll', onScroll, false);
  });
})(jQuery);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

scroll-away-header.html

<header class="banner"></header>
<main class="main">
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quibusdam minus nisi modi cumque porro, velit dolorum quisquam esse sunt vel nihil enim id ducimus soluta veritatis, beatae officiis laborum, recusandae eligendi dolor deleniti aspernatur quod nobis excepturi. Aspernatur excepturi, porro asperiores officia odit, autem perferendis temporibus iure quo sunt harum reprehenderit vel placeat eligendi odio nostrum. Officiis animi iusto nam, voluptatibus a qui quod autem laboriosam eveniet reiciendis, vitae soluta repudiandae, quos beatae vel optio porro rerum inventore. Incidunt reprehenderit ipsum libero voluptate cumque, inventore labore repellat illum! Laudantium quaerat temporibus itaque quibusdam, maxime totam suscipit natus, similique? Ullam repellendus adipisci quasi, maiores culpa ex quam ab. Deserunt incidunt quia commodi ab reprehenderit dolorem facere eos totam deleniti perferendis tempore est molestiae aut cupiditate dolore, vitae repellendus veritatis magni mollitia ullam expedita sapiente unde. Sit iste hic quae beatae, aliquam eveniet necessitatibus vero optio eius esse cum possimus vitae enim dolor tenetur doloremque consequatur. Velit vel harum assumenda asperiores culpa, aliquam dicta voluptates voluptatibus, rerum voluptas aperiam veniam amet. Officiis, facere laboriosam deserunt recusandae ut nesciunt, quaerat pariatur architecto consequatur ipsum reiciendis molestiae, itaque nostrum accusantium voluptatem qui unde. Voluptatem odio accusantium deleniti, esse suscipit nemo incidunt eum aspernatur!</p>
    <p>Accusamus a sequi blanditiis omnis tempore temporibus in, nulla beatae placeat nisi, fugiat veritatis inventore ipsa asperiores necessitatibus. Officia sunt pariatur possimus, quidem architecto, necessitatibus maiores soluta nemo debitis unde quas in placeat ad totam dignissimos molestiae quis numquam. Debitis, eligendi recusandae accusamus, repellat qui, dolor sunt, praesentium explicabo eveniet saepe illum molestiae. Libero eligendi commodi necessitatibus veniam, voluptatem nulla odio sint consequuntur laudantium unde hic, tempora possimus quia alias sit fuga! Dolorum voluptatem sint eos unde ad. Suscipit cupiditate perspiciatis dolorem, aliquid aut ex sunt nam, quam eos corporis praesentium cum deserunt ab exercitationem debitis consectetur fuga doloribus, porro nihil nisi quaerat quas. Modi provident aliquam ipsam cum ex possimus totam, itaque doloribus iure debitis. Sed non deserunt repellendus aliquam quod quam tenetur corporis, veniam qui deleniti modi velit odio mollitia minus pariatur explicabo sequi quis consectetur, sapiente excepturi, eveniet voluptatem officiis atque. Nulla praesentium laborum ad voluptate. Fugit nisi optio ipsa eveniet autem cupiditate non commodi enim nam deserunt iste distinctio inventore totam aspernatur nostrum molestiae soluta minima quia, veritatis quae voluptatem? Ad provident quam nemo aut ipsa rerum quod soluta consectetur veniam nobis molestias, optio officiis autem cumque cum quae id eius alias, neque ducimus, eligendi tenetur!</p>
    <p>Voluptate suscipit nobis iusto qui nesciunt quae similique minus omnis modi sapiente a nemo, autem dolor ratione deleniti quod cupiditate, in. At eligendi odit quidem ullam consectetur debitis voluptas harum explicabo, nostrum minima, doloribus nesciunt tenetur pariatur saepe vitae alias omnis exercitationem neque. Nisi magni aliquid, vitae officiis exercitationem architecto, voluptas nulla porro hic, sequi commodi eum aperiam ratione repellendus eaque? Odit officiis aliquid voluptatem vero quos nisi sint consectetur, laboriosam explicabo in, recusandae asperiores non. Repellendus aut hic, optio cum autem quasi eius nulla perspiciatis. Error magnam hic pariatur laborum doloremque ab quis ducimus, odit facere accusamus! Non vel dolore nemo aspernatur sit, sequi, nam laudantium similique nobis sint ad asperiores autem dolores modi corrupti sapiente dolorem veritatis hic distinctio. Earum modi recusandae illo voluptas nisi ea illum delectus mollitia, reprehenderit, ad iste! Dignissimos reiciendis cum maiores corporis perferendis vero veniam obcaecati minus quis recusandae autem odit veritatis, odio similique molestias iure debitis fuga provident quisquam inventore quaerat mollitia aut saepe voluptates. Omnis nesciunt ab amet optio id dolorum, quisquam, illum iusto voluptatem, incidunt recusandae enim. Fugit ipsam, soluta enim impedit doloribus adipisci velit culpa magni quae sapiente praesentium obcaecati omnis dolor accusantium sunt nostrum voluptatibus, alias excepturi commodi.</p>
    <p>Quo magni expedita modi harum autem nemo repudiandae voluptatem architecto, sed adipisci excepturi, voluptate voluptatum veniam natus itaque. Omnis veniam, harum placeat quasi voluptatem totam accusamus magni quaerat sit voluptates veritatis amet voluptas commodi delectus. Amet quae ipsum corrupti officia, maxime cumque voluptate blanditiis delectus doloribus eos minus tenetur, aliquam placeat inventore corporis, adipisci et, unde. Nesciunt similique obcaecati optio animi laboriosam excepturi quidem natus labore, odit ea libero eligendi eveniet itaque incidunt. Sit, quasi et nobis cupiditate quae accusamus omnis libero inventore ex esse adipisci perferendis rerum tempora ea ipsum mollitia qui distinctio culpa iste rem! Laborum nihil sit rerum autem quis impedit libero eveniet consequuntur rem incidunt sapiente alias, obcaecati nemo nam odio itaque ea at sequi perferendis, dolorum molestias deserunt corrupti. Corrupti mollitia harum recusandae nulla itaque sit illum sed. Dicta rerum enim quasi facilis, dignissimos laudantium expedita soluta culpa, quas excepturi. Tempora tenetur sit veniam commodi eos porro pariatur laboriosam aliquam nisi dicta nobis quae asperiores at aperiam fugiat, dolor consequatur temporibus esse nulla ea vel, voluptatem architecto! Molestias incidunt, nisi unde odit repellendus. Iusto voluptate voluptates, aliquam, voluptatibus cum consequuntur ipsum ex totam facilis minima, eaque illo sunt consequatur dolore, alias reprehenderit natus necessitatibus mollitia.</p>
    <p>Vitae animi cumque aperiam, repudiandae laudantium velit voluptates, quaerat quo temporibus eligendi error dolore quam at non impedit fugit, nisi doloremque maiores molestiae voluptatibus? Unde voluptatibus dolores nobis ipsam eius id fuga tempora nulla repellat praesentium ex vel pariatur reiciendis modi officiis excepturi voluptas qui eveniet natus, fugiat. Nesciunt fugit distinctio voluptatum nostrum, harum accusamus incidunt impedit voluptates ut cumque consectetur sit ducimus quis error ex beatae, maxime consequatur quos dolorum. At temporibus aliquam, est accusantium perferendis quidem tempore quibusdam, voluptas. Temporibus dolore possimus, recusandae amet. Nulla velit distinctio impedit neque doloribus quidem molestiae earum saepe, recusandae eius? Repellendus perferendis, quos eveniet excepturi magni facere, numquam vero ducimus quaerat repellat nemo. Debitis itaque sit quia reprehenderit dicta ducimus dolor aspernatur architecto cupiditate tempora. Tempora ad dolore, quaerat! Recusandae cupiditate delectus harum rerum voluptas temporibus in fugiat dignissimos. Eveniet quod iste reiciendis nesciunt esse pariatur id veritatis. Sit magni ullam laudantium culpa modi, distinctio adipisci voluptatum inventore fugit quis eligendi doloremque sunt, perferendis pariatur, ut hic similique! Ea, a, sint. Quam, similique molestiae? Quia vero laudantium, nobis quos magnam culpa incidunt earum autem omnis obcaecati, ex nesciunt tenetur, explicabo vel placeat quod quis maiores ad, officia quisquam. Facere sint veniam repellat.</p>
    <p>Quibusdam repellat itaque laborum totam commodi accusamus hic explicabo suscipit, eligendi harum veritatis obcaecati, sint quaerat iure ut cumque blanditiis voluptatem, corporis qui. Neque sit temporibus voluptatibus natus rerum, ullam eos beatae vero id laborum modi placeat dolores nam aliquid adipisci! Non dolorem qui obcaecati, sapiente blanditiis? Itaque officiis nisi esse quibusdam harum, quod facere quo, culpa quis minus quisquam enim asperiores, soluta fugit. Pariatur voluptates nostrum qui cumque, placeat maxime dolorum magni! Quas ipsum numquam velit eveniet recusandae incidunt, aliquid facere sit harum, amet voluptatibus blanditiis et fugit illo pariatur, aliquam labore? Adipisci libero, commodi, totam molestias tenetur pariatur omnis, similique nobis impedit nam placeat? Ad, facilis voluptates pariatur possimus sed temporibus, quibusdam laudantium. Magnam ad dolores, perspiciatis culpa recusandae ratione. Quam possimus voluptas, rem maiores molestiae sint praesentium repudiandae optio temporibus consequatur iure corporis, ipsa dolorum culpa illum eius quod! Reprehenderit, vero qui similique. Unde asperiores fugiat pariatur error necessitatibus, quidem quam eius delectus molestiae nisi ipsum repudiandae quisquam eaque eum ut, expedita ab. Eligendi consequuntur recusandae aspernatur quidem accusantium quo, quaerat optio, voluptate necessitatibus laborum aperiam rem eaque unde libero velit illum ipsam est illo. Exercitationem qui asperiores non voluptatem deleniti, consequatur deserunt eum quas amet libero.</p>
    <p>Iure ut itaque totam ipsam nulla natus aut nihil dignissimos ducimus, amet! Est non, assumenda harum quaerat, ex architecto sapiente, ut debitis explicabo dolore nemo officiis modi aspernatur voluptatibus error delectus nobis neque! Expedita saepe eius sequi porro unde nemo ut reiciendis, vel sunt suscipit doloremque temporibus, dolores quo, dicta neque ipsam repudiandae officia labore culpa. Qui enim ratione dolorum, esse consequatur quaerat quo ut quas reprehenderit, nemo soluta ad odit incidunt ab magnam minus aliquam vero obcaecati amet atque excepturi! Laudantium veniam velit doloribus praesentium, suscipit vitae accusamus dolores pariatur asperiores ducimus, totam sint ab repellendus minus temporibus delectus aliquam, voluptatibus quasi consequatur iste! Officia sed debitis officiis numquam sapiente? Dicta doloribus soluta illo, eius iste laborum corporis, error expedita numquam, consequuntur pariatur tempore dolore. Perferendis quidem aspernatur inventore ipsum adipisci veniam, maiores voluptatum aut ducimus officiis officia reiciendis nulla unde consectetur omnis explicabo saepe vel dolorum! Voluptates voluptatibus quo nam, architecto, earum aut libero, possimus laborum quia repellat ea. Ad mollitia odit aspernatur aperiam, animi nulla cum, pariatur quidem architecto porro consequuntur cumque corporis. Ab quos impedit dignissimos doloribus distinctio, ducimus aspernatur repellat deserunt quidem ex saepe, aperiam, nesciunt consequuntur. Neque ullam libero nam sit maiores voluptatem modi?</p>
    <p>Laborum facilis magni, distinctio veniam ab est, quam fugiat illum deserunt, mollitia dicta nemo, incidunt dignissimos minima reprehenderit ipsam fuga praesentium. Minus aliquid dolorum ea fuga eum quibusdam, nostrum vero nesciunt ex recusandae, neque necessitatibus esse placeat nisi maxime doloremque autem accusamus optio nulla dolore libero maiores! Ad ullam culpa nobis voluptatem assumenda totam aliquid veritatis dolor veniam minima pariatur repudiandae rerum, ipsa sit facilis eligendi, cupiditate voluptates tenetur. Consectetur deleniti mollitia doloremque sunt fugiat totam numquam quos excepturi id dolorem sequi odit error saepe expedita impedit iure maxime reiciendis, beatae, inventore, corrupti! Sunt dolore ut eos nesciunt, ab, quos pariatur earum eligendi soluta. Non perspiciatis laudantium, nemo sint ullam sapiente deserunt vitae, ut architecto ratione. Expedita qui nisi sit fugit, tempore ipsum. Obcaecati ducimus accusamus fugit? Reiciendis soluta maxime, consectetur, ad aliquam autem vel natus perferendis amet nemo impedit vitae error nobis nisi earum, aut quos officia, corporis odit! Quae eius iure maxime, sequi modi quisquam. Omnis earum quasi qui nobis ex voluptate sunt? Dolores, natus quas facere ut maxime error voluptatem! Dolores temporibus, quod impedit nisi, ratione dolorem sed saepe consectetur aperiam esse deleniti possimus fugit quos illo, atque soluta pariatur sunt quae! Molestiae, impedit ullam quibusdam repellendus.</p>
    <p>Voluptatibus ut minus cum eligendi, provident autem, facilis expedita iure commodi libero aliquam harum qui, pariatur aperiam recusandae vitae. Amet soluta molestias maxime, numquam vel nesciunt veniam! Repudiandae architecto nisi perspiciatis voluptates nostrum aperiam praesentium corrupti, earum consequatur. Facere quae ab nisi praesentium ipsum culpa minus veritatis modi, repudiandae facilis, ad expedita quas, explicabo, fugit a qui ipsam assumenda corrupti officia voluptate. Molestias ipsa animi possimus in labore a, laborum voluptas architecto autem inventore sit iure voluptatum veniam ex. Dignissimos tempore rerum asperiores consequatur dicta et facere sit deleniti nostrum, architecto similique optio voluptatum assumenda sint, laboriosam labore, rem reprehenderit itaque quisquam accusamus! Cumque ipsum, recusandae iste quos sapiente neque, vel qui adipisci quo eius illum et dolorum numquam veritatis laboriosam, asperiores error quia minus odio magni alias corrupti? Nam corporis repellat id distinctio eos odio omnis quas nostrum adipisci atque at laboriosam amet eum commodi, aspernatur consectetur aliquam. Assumenda quod excepturi id incidunt. Nobis cum id aperiam eum obcaecati, tempore quo, consequatur dolores adipisci ducimus, blanditiis error est repudiandae voluptate repellendus at ullam ea dolorem beatae voluptatibus voluptates! Tenetur blanditiis provident vitae modi nam voluptates ducimus distinctio nesciunt in officia esse ipsam et rerum repellendus, fuga quis, numquam facere!</p>
    <p>Eaque dignissimos et doloribus cum reprehenderit laboriosam possimus modi earum non consequuntur similique, labore atque, vel necessitatibus id vero ipsum, beatae expedita totam consequatur nulla maiores voluptatibus. Impedit nemo possimus voluptate praesentium vero iste, ex ipsum nisi, numquam alias provident at architecto ipsa pariatur soluta atque dolore sapiente ducimus eius assumenda dicta laborum temporibus modi. Assumenda, quidem rem tempore, fugiat adipisci, nulla iusto possimus tempora a optio dicta saepe, sapiente incidunt voluptatum? Culpa voluptas, qui provident ut amet eaque quia itaque quae neque. Suscipit consequatur necessitatibus nulla minima id natus hic, voluptate molestiae magni earum magnam assumenda error, voluptatem nihil! Maiores soluta libero, ipsum aut deleniti, rerum enim totam obcaecati ut, aliquam fugiat? Cum maxime ea dolore porro vero facilis rerum nesciunt minus expedita culpa voluptatem dolorem, suscipit est! Temporibus saepe provident magnam inventore, veniam quaerat beatae soluta reprehenderit minima et deleniti, mollitia omnis, voluptates eius officia atque recusandae error aspernatur! Laboriosam molestias quam amet eos rerum similique suscipit, illo eum doloremque, atque quasi dolore architecto mollitia. Labore, fugiat, ullam. Soluta deleniti, tenetur delectus quae cum dolore aut quos quia voluptate, explicabo eos recusandae eius fugit maiores fugiat officiis, nobis hic impedit, ut distinctio dolor? Voluptate sit repellat, sapiente reprehenderit.</p>
<p>Vitae animi cumque aperiam, repudiandae laudantium velit voluptates, quaerat quo temporibus eligendi error dolore quam at non impedit fugit, nisi doloremque maiores molestiae voluptatibus? Unde voluptatibus dolores nobis ipsam eius id fuga tempora nulla repellat praesentium ex vel pariatur reiciendis modi officiis excepturi voluptas qui eveniet natus, fugiat. Nesciunt fugit distinctio voluptatum nostrum, harum accusamus incidunt impedit voluptates ut cumque consectetur sit ducimus quis error ex beatae, maxime consequatur quos dolorum. At temporibus aliquam, est accusantium perferendis quidem tempore quibusdam, voluptas. Temporibus dolore possimus, recusandae amet. Nulla velit distinctio impedit neque doloribus quidem molestiae earum saepe, recusandae eius? Repellendus perferendis, quos eveniet excepturi magni facere, numquam vero ducimus quaerat repellat nemo. Debitis itaque sit quia reprehenderit dicta ducimus dolor aspernatur architecto cupiditate tempora. Tempora ad dolore, quaerat! Recusandae cupiditate delectus harum rerum voluptas temporibus in fugiat dignissimos. Eveniet quod iste reiciendis nesciunt esse pariatur id veritatis. Sit magni ullam laudantium culpa modi, distinctio adipisci voluptatum inventore fugit quis eligendi doloremque sunt, perferendis pariatur, ut hic similique! Ea, a, sint. Quam, similique molestiae? Quia vero laudantium, nobis quos magnam culpa incidunt earum autem omnis obcaecati, ex nesciunt tenetur, explicabo vel placeat quod quis maiores ad, officia quisquam. Facere sint veniam repellat.</p>
    <p>Quibusdam repellat itaque laborum totam commodi accusamus hic explicabo suscipit, eligendi harum veritatis obcaecati, sint quaerat iure ut cumque blanditiis voluptatem, corporis qui. Neque sit temporibus voluptatibus natus rerum, ullam eos beatae vero id laborum modi placeat dolores nam aliquid adipisci! Non dolorem qui obcaecati, sapiente blanditiis? Itaque officiis nisi esse quibusdam harum, quod facere quo, culpa quis minus quisquam enim asperiores, soluta fugit. Pariatur voluptates nostrum qui cumque, placeat maxime dolorum magni! Quas ipsum numquam velit eveniet recusandae incidunt, aliquid facere sit harum, amet voluptatibus blanditiis et fugit illo pariatur, aliquam labore? Adipisci libero, commodi, totam molestias tenetur pariatur omnis, similique nobis impedit nam placeat? Ad, facilis voluptates pariatur possimus sed temporibus, quibusdam laudantium. Magnam ad dolores, perspiciatis culpa recusandae ratione. Quam possimus voluptas, rem maiores molestiae sint praesentium repudiandae optio temporibus consequatur iure corporis, ipsa dolorum culpa illum eius quod! Reprehenderit, vero qui similique. Unde asperiores fugiat pariatur error necessitatibus, quidem quam eius delectus molestiae nisi ipsum repudiandae quisquam eaque eum ut, expedita ab. Eligendi consequuntur recusandae aspernatur quidem accusantium quo, quaerat optio, voluptate necessitatibus laborum aperiam rem eaque unde libero velit illum ipsam est illo. Exercitationem qui asperiores non voluptatem deleniti, consequatur deserunt eum quas amet libero.</p>
    <p>Iure ut itaque totam ipsam nulla natus aut nihil dignissimos ducimus, amet! Est non, assumenda harum quaerat, ex architecto sapiente, ut debitis explicabo dolore nemo officiis modi aspernatur voluptatibus error delectus nobis neque! Expedita saepe eius sequi porro unde nemo ut reiciendis, vel sunt suscipit doloremque temporibus, dolores quo, dicta neque ipsam repudiandae officia labore culpa. Qui enim ratione dolorum, esse consequatur quaerat quo ut quas reprehenderit, nemo soluta ad odit incidunt ab magnam minus aliquam vero obcaecati amet atque excepturi! Laudantium veniam velit doloribus praesentium, suscipit vitae accusamus dolores pariatur asperiores ducimus, totam sint ab repellendus minus temporibus delectus aliquam, voluptatibus quasi consequatur iste! Officia sed debitis officiis numquam sapiente? Dicta doloribus soluta illo, eius iste laborum corporis, error expedita numquam, consequuntur pariatur tempore dolore. Perferendis quidem aspernatur inventore ipsum adipisci veniam, maiores voluptatum aut ducimus officiis officia reiciendis nulla unde consectetur omnis explicabo saepe vel dolorum! Voluptates voluptatibus quo nam, architecto, earum aut libero, possimus laborum quia repellat ea. Ad mollitia odit aspernatur aperiam, animi nulla cum, pariatur quidem architecto porro consequuntur cumque corporis. Ab quos impedit dignissimos doloribus distinctio, ducimus aspernatur repellat deserunt quidem ex saepe, aperiam, nesciunt consequuntur. Neque ullam libero nam sit maiores voluptatem modi?</p>
    <p>Laborum facilis magni, distinctio veniam ab est, quam fugiat illum deserunt, mollitia dicta nemo, incidunt dignissimos minima reprehenderit ipsam fuga praesentium. Minus aliquid dolorum ea fuga eum quibusdam, nostrum vero nesciunt ex recusandae, neque necessitatibus esse placeat nisi maxime doloremque autem accusamus optio nulla dolore libero maiores! Ad ullam culpa nobis voluptatem assumenda totam aliquid veritatis dolor veniam minima pariatur repudiandae rerum, ipsa sit facilis eligendi, cupiditate voluptates tenetur. Consectetur deleniti mollitia doloremque sunt fugiat totam numquam quos excepturi id dolorem sequi odit error saepe expedita impedit iure maxime reiciendis, beatae, inventore, corrupti! Sunt dolore ut eos nesciunt, ab, quos pariatur earum eligendi soluta. Non perspiciatis laudantium, nemo sint ullam sapiente deserunt vitae, ut architecto ratione. Expedita qui nisi sit fugit, tempore ipsum. Obcaecati ducimus accusamus fugit? Reiciendis soluta maxime, consectetur, ad aliquam autem vel natus perferendis amet nemo impedit vitae error nobis nisi earum, aut quos officia, corporis odit! Quae eius iure maxime, sequi modi quisquam. Omnis earum quasi qui nobis ex voluptate sunt? Dolores, natus quas facere ut maxime error voluptatem! Dolores temporibus, quod impedit nisi, ratione dolorem sed saepe consectetur aperiam esse deleniti possimus fugit quos illo, atque soluta pariatur sunt quae! Molestiae, impedit ullam quibusdam repellendus.</p>
    <p>Voluptatibus ut minus cum eligendi, provident autem, facilis expedita iure commodi libero aliquam harum qui, pariatur aperiam recusandae vitae. Amet soluta molestias maxime, numquam vel nesciunt veniam! Repudiandae architecto nisi perspiciatis voluptates nostrum aperiam praesentium corrupti, earum consequatur. Facere quae ab nisi praesentium ipsum culpa minus veritatis modi, repudiandae facilis, ad expedita quas, explicabo, fugit a qui ipsam assumenda corrupti officia voluptate. Molestias ipsa animi possimus in labore a, laborum voluptas architecto autem inventore sit iure voluptatum veniam ex. Dignissimos tempore rerum asperiores consequatur dicta et facere sit deleniti nostrum, architecto similique optio voluptatum assumenda sint, laboriosam labore, rem reprehenderit itaque quisquam accusamus! Cumque ipsum, recusandae iste quos sapiente neque, vel qui adipisci quo eius illum et dolorum numquam veritatis laboriosam, asperiores error quia minus odio magni alias corrupti? Nam corporis repellat id distinctio eos odio omnis quas nostrum adipisci atque at laboriosam amet eum commodi, aspernatur consectetur aliquam. Assumenda quod excepturi id incidunt. Nobis cum id aperiam eum obcaecati, tempore quo, consequatur dolores adipisci ducimus, blanditiis error est repudiandae voluptate repellendus at ullam ea dolorem beatae voluptatibus voluptates! Tenetur blanditiis provident vitae modi nam voluptates ducimus distinctio nesciunt in officia esse ipsam et rerum repellendus, fuga quis, numquam facere!</p>
    <p>Eaque dignissimos et doloribus cum reprehenderit laboriosam possimus modi earum non consequuntur similique, labore atque, vel necessitatibus id vero ipsum, beatae expedita totam consequatur nulla maiores voluptatibus. Impedit nemo possimus voluptate praesentium vero iste, ex ipsum nisi, numquam alias provident at architecto ipsa pariatur soluta atque dolore sapiente ducimus eius assumenda dicta laborum temporibus modi. Assumenda, quidem rem tempore, fugiat adipisci, nulla iusto possimus tempora a optio dicta saepe, sapiente incidunt voluptatum? Culpa voluptas, qui provident ut amet eaque quia itaque quae neque. Suscipit consequatur necessitatibus nulla minima id natus hic, voluptate molestiae magni earum magnam assumenda error, voluptatem nihil! Maiores soluta libero, ipsum aut deleniti, rerum enim totam obcaecati ut, aliquam fugiat? Cum maxime ea dolore porro vero facilis rerum nesciunt minus expedita culpa voluptatem dolorem, suscipit est! Temporibus saepe provident magnam inventore, veniam quaerat beatae soluta reprehenderit minima et deleniti, mollitia omnis, voluptates eius officia atque recusandae error aspernatur! Laboriosam molestias quam amet eos rerum similique suscipit, illo eum doloremque, atque quasi dolore architecto mollitia. Labore, fugiat, ullam. Soluta deleniti, tenetur delectus quae cum dolore aut quos quia voluptate, explicabo eos recusandae eius fugit maiores fugiat officiis, nobis hic impedit, ut distinctio dolor? Voluptate sit repellat, sapiente reprehenderit.</p>    
  </div>
</main>

scroll-away-header.markdown

Scroll-away header

My attempt at duplicating a menu effect I've seen in a few places like here: http://www.instrument.com/

A bit of parallax near the top + fully shows/hides further down the page.

A Pen by Ryan Niswonger on CodePen.

License.

style.scss

$header-height: 150px;

.banner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: $header-height;
  background-color: #61ed12;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);

  &.has-transition {
    transition: transform 300ms;
  }
}

.main {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: $header-height;
  
  .container {
    padding: 20px 30px;
  }
}