Persistent nav after scrolling past a certain element.

by kthornbloom

HTML

<div class="nav">Navigation</div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.
<br>
<div class="trigger">Scroll Past this</div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi sunt iste neque eligendi illum vel quis ex maiores voluptatibus animi vitae possimus doloribus consequatur porro itaque debitis nesciunt quidem...

CSS

.nav {
    position:fixed;
    top:0;
    left:0;
    background:black;
    color:white;
    z-index:999;
    transform:translateY(-100%);
    width:100%;
    padding:15px 0;
    text-align:center;
    transition:.2s;
}

.nav-active {
  transform:translateY(0%);
}

.trigger {
  display:block;
  padding:10px;
  font-weight:bold;
  background:red;
  color:#fff;
}

body {
  font-family:sans-serif;
}

JavaScript

$(window).scroll(function () {
    var amtScrolled = $(window).scrollTop(),
        triggerAmt = $('.trigger').offset().top;

    if (amtScrolled >= triggerAmt) {
        $('.nav').addClass('nav-active');
    } else {
        $('.nav').removeClass('nav-active');
    }
});