如何创建一个 header 和 JQuery，它在向上滚动时固定在顶部但在向下滚动时隐藏？

Question

I am currently working on a site product where I have to create a site-header that is always fixed on top of the viewport but when I scroll down it hides, and again when I scroll up, it becomes visible again. Actually, I made it happen somehow but I think the JQuery I used can be simpler and currently have some unnecessary variations in it. I used the JQuery from a reference available on inte.net.

Here is my code.

HTML

    <header class="site-header">
        <div class="inner">
        </div>
    </header>

CSS

    .site-header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 60px;
    background: #fff;
    transition: transform .25s;}

    .hidden {transform:translateY(-100%)}

JQuery

    jQuery( function( $ ) {
        var didScroll;
        var lastScrollTop = 0;
        var delta = 5;
        var navbarHeight = $('.site-header').outerHeight();

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

    setInterval(function() {
        if (didScroll) {
        hasScrolled();
        didScroll = false;
        }
    }, 250);

    function hasScrolled() {
    var st = $(this).scrollTop();

    // Make scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If scrolled down and past the site-header, add class .hidden.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('.site-header').addClass('hidden');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('.site-header').removeClass('hidden');
        }
    }

    lastScrollTop = st;
    }
    } );

Now, all these things together are functional and I have a header that is fixed, but when I scroll down, it disappears and when I scroll back up, it becomes visible again- as I wanted. But, since I am not much familiar with JQuery at all, I am not sure if this JQuery can be more simpler. Because, I think it would be great if I can achieve the same results with a smaller and simpler JQuery.

I made this work but I believe a smaller and simpler JQuery can make this same function work too.

Answer 1

This solution shows a fixed header that fades out and in on scroll. A conf.hideFactor threshold determines at what scroll pos the header fades out, 0.5 is half the header height. The trick is to hide/show only when needed, done with a .is(':visible') check

 const conf = { hideFactor: 0.5 // factor of site-header height to hide }; $('document').ready(function() { const $headerElem = $('.site-header'); let navbarHeight = $headerElem.outerHeight(); $(document).scroll(function() { let scrollPos = Math.round($(document).scrollTop()); let headerIsVisible = $headerElem.is(':visible'); if(scrollPos > navbarHeight * conf.hideFactor) { if(headerIsVisible) { console.log('Hide at ' + scrollPos); $headerElem.hide('slow'); } } else if(.headerIsVisible) { console;log('Show at ' + scrollPos). $headerElem;show('slow'); } }); });

 .site-header { position: fixed; z-index: 1; width: 500px; height: 60px; background-color: #eaeaea; padding: 5px 10px; }.main-content { width: 500px; background-color: #fafafa; padding: 65px 10px 5px 10px; }.as-console-wrapper { max-height: 20px;important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="page"> <header class="site-header"> <div class="inner"> This header is fixed and fades away on scroll </div> </header> <div class="main-content"> <h1>Lorem ipsum dolor sit amet</h1> <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p> <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> </div> </div>