Jquery sticky nav only when scrolling up

Question

Please check this JPG out for reference:

I have a navigation bar that appears on the top of the page. The behaviour that I'm looking for is: When you scroll up, the same nav bar fades in and is fixed to the top of the screen.

The code I am using here works, except I am unsure how to set a rule that stops the nav from sticking to the top of the screen once you scroll back up to its default position. Currently, with the code below, the nav remains fixed to the top, even when you scroll back up to the top of the page.

function () {
var previousScroll = 0;

$(window).scroll(function(){
   var currentScroll = $(this).scrollTop();
   if (currentScroll > previousScroll){
        $('#header').fadeOut();
   } else {
        $('#header').fadeIn();
        $('#header').addClass('fixed');
   }
   previousScroll = currentScroll;
});

And my CSS is:

.fixed {
    position: fixed;
    top: 0;
}

Answer 1

You will have to declare an additional variable recording the original vertical offset of the #header element. As this value will change when the scroll event fires (as a fixed position will reset the offset to 0), we declare it one level above the scroll event:

$(document).ready(function() {
    let previousScroll = 0;
    const $header = $('#header');
    const headerOrgOffset = $header.offset().top;

    $(window).scroll(function() {
        const currentScroll = $(this).scrollTop();
        if(currentScroll > headerOrgOffset) {
            if (currentScroll > previousScroll) {
                $header.fadeOut();
            } else {
                $header
                    .fadeIn()
                    .addClass('fixed');
            }
        } else {
             $header.removeClass('fixed');   
        }
        previousScroll = currentScroll;
    });
    
});

---

See full example below:

$(document).ready(function() {
    let previousScroll = 0;
    const $header = $('#header');
    const headerOrgOffset = $header.offset().top;
    
    $('#header-wrap').height($header.height());

    $(window).scroll(function() {
        const currentScroll = $(this).scrollTop();

        if(currentScroll > headerOrgOffset) {
            if (currentScroll > previousScroll) {
                $header.fadeOut();
            } else {
                $header
                  .fadeIn()
                  .addClass('fixed');
            }
        } else {
             $header.removeClass('fixed');   
        }
        previousScroll = currentScroll;
    });
    
});

body {
    font-size: 1em;
    line-height: 1.5em;
    padding: 1em;
    position: relative;
}
p {
    margin-bottom: 3em;
}
#header-wrap {
    position: relative;
}
#header {
    background-color: #999;
    position: absolute;
    top: 0;
}
#header.fixed {
    position: fixed;
    top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Simulation of extra space above header element.</p>
<div id="header-wrap">
    <div id="header">This is the header.</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis fermentum arcu id fringilla. Sed vitae laoreet metus. Nulla hendrerit euismod purus ac ultricies. Curabitur auctor mauris vitae urna commodo scelerisque cursus diam posuere. Suspendisse risus libero, pulvinar eu varius non, sollicitudin quis sem. Maecenas in ante nulla, vel mattis erat. Ut sed nibh leo, et elementum purus. Pellentesque a magna massa.</p>
<p>Suspendisse potenti. Praesent pulvinar vulputate ultricies. Sed sit amet lacus ac turpis blandit vehicula. Curabitur tellus lacus, luctus ac luctus vel, consectetur vel sem. Phasellus magna lacus, placerat at fermentum et, scelerisque id est. Nulla rhoncus lacinia elementum. Nunc rhoncus aliquam condimentum. Integer eu mi ut purus elementum hendrerit sed vel felis. Nam rhoncus, diam non pellentesque rutrum, sapien tellus sagittis tortor, et volutpat felis orci eu lectus. Aenean euismod faucibus adipiscing.</p>
<p>In ullamcorper, lorem ac dapibus mollis, lectus nisi tincidunt felis, non placerat magna libero in ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Etiam laoreet dictum ligula eget posuere. Sed ultrices nulla interdum metus elementum rutrum. Fusce nec ipsum felis, vitae mollis dui. Pellentesque sed ipsum id nibh ultrices tristique. Phasellus est eros, mollis vitae tempor vel, pulvinar quis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In suscipit fermentum convallis.</p>
<p>In in nulla velit, eget pretium lorem. Aenean eget dapibus orci. Vestibulum sapien nunc, malesuada quis malesuada a, luctus non eros. Quisque nunc quam, volutpat vel vehicula lacinia, accumsan sit amet orci. Fusce pulvinar elementum urna eu congue. Aenean eu nulla nec leo condimentum fermentum. Proin nisi lacus, tempor nec gravida in, tempus ut dolor. Aliquam rhoncus elementum magna, a hendrerit ligula sagittis eget. Donec non aliquam sapien. Maecenas venenatis lacinia turpis in fermentum. Cras in lacus turpis, vitae porttitor dui. Sed ullamcorper tempor quam semper venenatis. Praesent fringilla sem quis turpis vulputate pretium. Etiam quis nisi ut odio suscipit pretium a in dui. Morbi in ipsum libero. Proin tempus consectetur ullamcorper.</p>
<p>Cras lorem quam, sollicitudin ut faucibus in, tempor et nibh. Vivamus ut elementum est. Sed lacinia diam at augue vulputate condimentum sodales neque dapibus. Aenean facilisis elementum nisi eu sodales. Donec cursus, sapien eget mattis tempus, ligula tortor fermentum diam, imperdiet facilisis sem tellus at justo. Quisque feugiat imperdiet nulla, nec euismod sapien pulvinar consequat. Nam urna diam, auctor quis fermentum eget, ullamcorper sollicitudin nulla. Fusce convallis vulputate iaculis. Praesent porttitor vulputate mauris, ac scelerisque felis pellentesque eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent venenatis metus orci, in facilisis nibh. Pellentesque ullamcorper blandit est ac luctus. Donec molestie malesuada faucibus. Sed risus dolor, aliquet at sollicitudin porta, commodo eget mauris.</p>