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

Question

尝试创建这样的标题 + 进度条：https : //blog.fullstory.com/cross-functional-collaboration/需要一个粘性（固定）标题，仅在向上滚动时显示，向下滚动时隐藏。标题下方始终固定有一个进度条。当您向上滚动并隐藏蓝色标题时，进度条仍应显示...就像 blog.fullstory.comhttps://codepen.io/connecteev/pen/eaqxvj代码片段：// Hide Header on scroll down, Show Header on scroll upvar 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>我正在努力让它发挥作用。有任何想法吗？