Scroll Hiding Nav

By Rafi

How do I use This?

Hiding the navigation on scroll for more room to see the page content. Scrolling back up will reveal nav again.

HTML

<nav class="scrollhide-nav">
  <div class="top-bar">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li class="menu-text">Site Title</li>
        <li>
          <a href="#">One</a>
          <ul class="menu vertical">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><input type="search" placeholder="Search"></li>
        <li><button type="button" class="button">Search</button></li>
      </ul>
    </div>
  </div>
</nav>

$scrollhide-nav-transition-speed: 1s;

.scrollhide-nav {
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  transition: transform $scrollhide-nav-transition-speed cubic-bezier(0.86, 0, 0.07, 1);

  &.hidden {
    transform: translateY(-100%);
  }
}

.scrollhide-nav {
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1);
}

.scrollhide-nav.hidden {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

var prev = 0;
var $window = $(window);
var nav = $('.scrollhide-nav');

$window.on('scroll', function(){
  var scrollTop = $window.scrollTop();
  nav.toggleClass('hidden', scrollTop > prev);
  prev = scrollTop;
});

Scroll Hiding Nav

By Rafi

Top Bar with Animation

Mobile Footer / Bottom Bar

Full Screen Off Canvas

Scroll Hiding Nav

By Rafi

Similar Building Blocks

Top Bar with Animation

Mobile Footer / Bottom Bar

Full Screen Off Canvas