slider nav with sticky header

by hlmurray91

HTML

<header>
    <span class="burger-top"></span>
    <span class="burger-middle"></span>
    <span class="burger-bottom"></span>
</header>
<nav class="menu move">
    <a href="#">link 1</a>
    <a href="#">link 2</a>
    <a href="#">link 3</a>
    <a href="#">link 4</a>
    <a href="#">link 5</a>
</nav>
<div class="wrapper">
    <div class="content">
        <div class="text">
            <p>Bacon ipsum dolor amet prosciutto ham hock strip steak, meatball shoulder doner turkey salami alcatra leberkas rump ribeye turducken. Prosciutto corned beef tongue, leberkas pork loin turducken venison. Biltong andouille prosciutto pork loin pancetta. Leberkas picanha doner tail chicken t-bone flank, cow landjaeger pork belly strip steak ground round pastrami capicola. Short ribs capicola meatloaf, salami ground round leberkas ham hock pork picanha tri-tip beef biltong sirloin prosciutto shankle. Shank drumstick capicola rump, pig t-bone strip steak sausage pork ham.</p>
            
            <p>Corned beef porchetta strip steak jowl, chuck jerky meatloaf pork loin fatback. Short loin tri-tip meatloaf, capicola pig salami beef venison ham hock. Salami turkey kielbasa flank ball tip kevin porchetta short ribs t-bone. Pork belly beef sirloin bacon pork loin flank, landjaeger frankfurter biltong tongue porchetta fatback prosciutto brisket.</p>
            
            <p>Pig ground round kielbasa pancetta, cupim bacon andouille rump jowl brisket pork loin prosciutto jerky cow short ribs. Shankle flank spare ribs landjaeger chuck beef chicken meatloaf jerky tongue meatball. Ground round landjaeger t-bone boudin. Beef meatball shoulder ground round filet mignon prosciutto flank.</p>
            
            <p>Boudin andouille turducken, pork belly capicola leberkas drumstick pork corned beef beef. Sausage tenderloin chuck landjaeger, venison jerky picanha fatback turducken jowl biltong sirloin shank bresaola cow. Ham hock jerky beef ribs tenderloin meatloaf short ribs pork loin...

CSS

html, body { margin:0; padding:0; height: 1000px; background-color:floralwhite }

body.move {
    overflow: hidden;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    background: lightgrey;
    z-index: 25;
    height: 25px;
    transition: all 0.3s ease;
}

header.nav-up {
    top: -25px;
}

header.move {
    transform: translateX(300px);
}

.burger-top,
.burger-middle,
.burger-bottom {
    position: absolute;
    width: 35px;
    display: block;
    background-color: #000;
    height: 5px;
}

.burger-top {
    top: 0;
}

.burger-bottom {
    bottom: 0;
}

.burger-middle {
    top: 40%;
}

.menu {
    width: 300px;
    height:100%;
    position:fixed;
    overflow: hidden;
    background-color:seagreen;
    transition: all 0.3s;
    left: 0;
    z-index:50;
}

.menu a {
    display: block;
    color: #000;
    text-decoration: none;
}

.menu.move {
    left: -300px;
    overflow: visible;
}

.wrapper.move {
    overflow: hidden;
}

.content {
    padding-top: 25px;
    margin-left:0px;
    transition: all .3s;
}

.text {
    transition: all 0.3s ease;
}

.content.move .text {
    transform: translateX(300px);
}

JavaScript

$('header').click(function() {
    $('body').toggleClass('move');
    $('.menu').toggleClass('move');
    $('.wrapper').toggleClass('move');
    $(this).toggleClass('move');
    $('.content').toggleClass('move');
});

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    if($('.menu').hasClass('move')) {
       didScroll = true;
    } else {
        didScroll = false;
    }
});

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

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}