<div class="top-line">

  <p>Top line scrols away  ...... Top line Top line Top line Top line Top line Top line Top line Top line Top line Top line Top line Top line Top line Top line Top line Top line Top line   </p>
</div>

<div class="navigation">
  <p>Navigation can be auto height and will be sticky on scroll up  ..... Navigation will be sticky  ..... Navigation will be sticky  ..... Navigation will be sticky  ..... Navigation will be sticky  ..... Navigation will be sticky  ..... Navigation will be sticky  ..... Navigation will be sticky  ..... Navigation will be sticky  ..... Navigation will be sticky  ..... </p>
</div>

<div class="content">
  <h1><a href="http://osvaldas.info/auto-hide-sticky-header">Roughly Based on Auto-Hide Sticky Header</a></h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
  <p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. <b>Vestibulum lacinia arcu eget nulla</b>. Proin ut ligula vel nunc egestas porttitor. <b>Curabitur tortor</b>.
    Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.</p>
  <p><b>Curabitur sodales ligula in libero</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.
    Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.
    <b>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh</b>. Suspendisse in justo eu magna luctus suscipit.</p>
  <p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia
    molestie dui. Praesent blandit dolor. <i>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa</i>. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec,
    blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. <b>Sed non quam</b>. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi.</p>
  <p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. <i>Suspendisse in justo eu magna luctus suscipit</i>. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales
    libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales.
    Aenean lectus elit, fermentum non, convallis id, sagittis at, neque.</p>
  <p>Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. <i>Morbi in ipsum sit amet pede facilisis laoreet</i>. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. <i>Integer lacinia sollicitudin massa</i>. Vivamus consectetuer
    risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Ut eu diam at pede suscipit sodales</b>. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
    ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
  <p><b>Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula</b>. Mauris massa. Vestibulum lacinia arcu eget nulla. <i>Aenean lectus elit, fermentum non, convallis id, sagittis at, neque</i>. Class aptent taciti sociosqu ad litora torquent per
    conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. <i>Ut eu diam at pede suscipit sodales</i>. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed
    convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.</p>
  <p><b>Pellentesque nibh</b>. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos himenaeos. <i>Sed cursus ante dapibus diam</i>. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat
    mi a tellus consequat imperdiet. Vestibulum sapien.</p>
  <p>Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis
    in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. <i>Nam nec ante</i>. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus
    nunc, viverra nec, blandit vel, egestas et, augue.</p>
  <p><i>Mauris ipsum</i>. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar
    ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla
    quam. Aenean laoreet.</p>
  <p>Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. <b>Integer lacinia sollicitudin massa</b>. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean
    lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
  <p><b>Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo</b>. Nulla quis sem at nibh elementum imperdiet. <i>Proin sodales libero eget ante</i>. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. <b>Praesent libero</b>.
    Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <b>Praesent libero</b>. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.
    Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis.</p>
  <p>Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. <b>Curabitur sodales ligula in libero</b>. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <i>Duis sagittis ipsum</i>.
    Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis,
    tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.</p>
  <p>Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <b>Nam nec ante</b>. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
    eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. <i>Fusce ac turpis quis ligula lacinia aliquet</i>. Sed non quam. In vel mi sit amet augue congue
    elementum. Morbi in ipsum sit amet pede facilisis laoreet.</p>
  <p>Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. <b>Morbi in ipsum sit amet pede facilisis laoreet</b>.
    Integer lacinia sollicitudin massa. <b>Sed non quam</b>. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue.</p>
  <p><i>Sed non quam</i>. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. <i>Sed non quam</i>. Sed pretium
    blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet
    mollis lectus. Vivamus consectetuer risus et tortor. <b>Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede</b>. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Integer nec odio. Praesent libero. <b>Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula</b>. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed
    augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus,
    iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>In scelerisque sem at dolor</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit.</p>
  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse
    potenti. Nunc feugiat mi a tellus consequat imperdiet. <b>Quisque volutpat condimentum velit</b>. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.</p>
  <p>Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie
    dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices
    ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa.</p>
  <p>Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. <i>Donec lacus nunc, viverra nec, blandit vel, egestas et, augue</i>.
    Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. <b>Integer id quam</b>. Ut eu diam at pede suscipit sodales. Aenean
    lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula.</p>
  <p>Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. <b>Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula</b>.
    Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.</p>
  <p><b>Nulla ut felis in purus aliquam imperdiet</b>. Vestibulum lacinia arcu eget nulla. <b>Sed nisi</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. <i>Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula</i>.
    Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus
    non, massa.</p>
  <p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Curabitur tortor</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. <b>Quisque volutpat condimentum velit</b>. Nunc
    feugiat mi a tellus consequat imperdiet.</p>
  <p>Vestibulum sapien. <b>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh</b>. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. <b>Nunc feugiat mi a tellus consequat imperdiet</b>.
    Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non
    quam. <b>Nunc feugiat mi a tellus consequat imperdiet</b>. In vel mi sit amet augue congue elementum.</p>
</div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
.content {
  padding: 1rem 2rem;
  max-width: 1280px;
  margin: auto;
}
.top-line,
.navigation {
  padding: 1rem 2rem;
  background-color: #000000;
}
.top-line p,
.navigation p {
  margin: 0;
}
.top-line {
  position:relative;
  z-index: 10;
  color: #fff;
}
.navigation {
  background-color: red;
  z-index: 5;
}
.navigation {
  position: fixed;
  position:-webkit-sticky;
  position:sticky;
  top: -100%;
  left: 0;
  right: 0;
  background: red;
}
.show-nav {
  top: 0;
  transition: .5s ease-in-out .5s;
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.4);
  opacity:1;
}

/* old version
$(document).ready(function() {
  var didScroll;
  var lastScrollTop = 0;
  var $navigation = $(".navigation");
  var $topLine = $(".top-line");
  var $topHeader = $(".top-header");
  var delta = 50;

  $(window).scroll(function(event) {
    didScroll = true;
  });

  setInterval(function() {
    if (didScroll) {
      hasScrolled();
      didScroll = false;
    }
  }, 250);

  function hasScrolled() {
    var topHeaderHeight = $topHeader.outerHeight();
    var navbarHeight = $navigation.outerHeight();
    var st = $(this).scrollTop();

    if (st > lastScrollTop + 10) {
      //if page hasn't scrolled more than header height then do nothing and ensure fixed header is hidden
      if (Math.abs(st) <= topHeaderHeight + delta) {
        $navigation.removeClass("show-nav");
        return;
      }
      // Scroll Down so hide nav
      $navigation.removeClass("show-nav");
    }
    // Scroll Up so show nav
    if (st < lastScrollTop - 10) {
      if (Math.abs(st) <= navbarHeight) {
        $navigation.removeClass("show-nav");
        return;
      }
      $navigation.addClass("show-nav");
    }
    lastScrollTop = st;
  }
});
*/

//New  JS version supplied py Paul Wilkins at Sitepoint

$(document).ready(function domReady() {
  var $navigation = $(".navigation");
  var navClass = "show-nav";

  var lastScrollTop = 0;

  function scrollDirection(scrollTop) {
    var direction = Math.sign(scrollTop - lastScrollTop);
    return direction < 0 ? "up" : "down";
  }
  function autoshowNav() {
    var scrollTop = $(window).scrollTop();
    var scrollDir = scrollDirection(scrollTop);
    lastScrollTop = scrollTop;

    $navigation.toggleClass(navClass, scrollDir === "up");
  }

  var hasScrolled = false;
  $(window).scroll(function scrollWindowHandler() {
    hasScrolled = true;
  });
  setInterval(function scrollChecker() {
    if (hasScrolled) {
      autoshowNav();
      hasScrolled = false;
    }
  }, 250);
});