向下滚动时隐藏的粘性标题 + 固定进度条

Question

尝试创建这样的标题 + 进度条：https : //blog.fullstory.com/cross-functional-collaboration/

1. 需要一个粘性（固定）标题，仅在向上滚动时显示，向下滚动时隐藏。

2. 标题下方始终固定有一个进度条。当您向上滚动并隐藏蓝色标题时，进度条仍应显示...就像 blog.fullstory.com

https://codepen.io/connecteev/pen/eaqxvj

代码片段：

// 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) <= 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;

}

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%;

  background: blue;

  height: 30px;

}

/* smooth position indicator */

.scroll-progress-bar {

  position: fixed;

  top: 0;

  height: 3px;

  width: 0;

  background: green;

  color: green;

  z-index: 2;

}

.nav-up {

    /* hide the top nav on scroll down */

    top: -300px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header class="tw-z-50">

  <div class="nav-down">

  </div>

  <div class="tw-w-full">

    <div class="scroll-progress-bar"></div>

  </div>

</header>

我正在努力让它发挥作用。有任何想法吗？