Skip to main content

Forums

This topic contains 1 reply, has 2 voices, and was last updated by  Shikkediel 3 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #289124

    kp123
    Participant

    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.

    #289174

    Shikkediel
    Participant
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star