Sticky header that hides on scroll down + progress bar

[kp123]

Trying to create a header + progress bar like this:
https://blog.fullstory.com/cross-functional-collaboration/

1. This has a sticky (fixed) header that only shows up when you scroll up, and hides when you scroll down.
2. There is a progress bar FIXED below it.

I have these 2 components individually working, however, when I scroll up on the page, my progress bar (which is fixed at the bottom of the fixed header) also slides up and gets hidden. I want it to persist at the top of the page, even when the header is hidden (EXACTLy like blog.fullstory.com)

Here is my markup and the CSS that is relevant:

HTML:

< header >
  < div class="nav-down" >
  </ div >
  < div class="tw-w-full" >
    < div class="scroll-progress-bar">< / div >
  < / div >
< / header>

CSS:

body {
    /* this is to make room for the top nav / header */
    padding-top: 60px;
    overflow-x: hidden;
}

header {
    position: fixed;
    top: 0;
    transition: top 0.8s ease-in-out;
    width: 100%;

    /* smooth position indicator */
    .scroll-progress-bar {
        height: 3px;
        width: 0;
        @apply .tw-bg-ctaButtonColor;
        z-index: 2;
    }
}

.nav-up {
    /* hide the top nav on scroll down */
    top: -300px;
}

JS:

<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js</a>

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

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

    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)  lastScrollTop && st > navbarHeight){
            // Scroll Down
            $('header').removeClass('nav-down').addClass('nav-up');
        } else {
            // Scroll Up
            if(st + $(window).height() 

Any ideas? Sample code or a codepen would be awesome.

[Shikkediel]

Solved.

stackoverflow.com/56514946

[Author]

Posts