js scroll top

 

HTML:

<div id="site-wrappe">

<header class="site-header">

    <div class="mbi-globalhear">

        

        <div class="header__toggle">

            <a href="#" class="menu-toggle">

                <span></span>

                <span></span>

                <span></span>

            </a>

        </div>

        <div class="header__logo">

            <a href="#">

                <img src="images">

            </a>

        </div>

        <div class="mbi-shopcard">

            

            <div class="shop-cart"></div>

            

            <a href="#">

                <i class="fa fa-shopping-basket" aria-hidden="true"></i>

            </a>

        </div>

    </div>

</header>

</div>

CSS:

.site-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: auto;

    z-index: 10;

    transition: all .3s;

    height: 70px;

    background: #fff;

    border-bottom: 1px solid #d9d9d9;

    z-index: 9999999999999;

}

.site-header.is-scroll-top {

    transform: translateY(-100%);

}

div#site-wrapper {

    padding-top: 70px;

    background: #fff;

}

JS:

function headerScroll() {

    const header = $('.site-header');

    let last_scroll_point = $(window).scrollTop();

    if (last_scroll_point > 0) {

        header.addClass('is-scroll-top');

    }

    $(window).on('scroll', function(e) {

        const scroll_point = $(this).scrollTop();

        // if(!$(header_search).hasClass('is-active')){

            if (scroll_point > last_scroll_point && scroll_point > 100) {

                header.addClass('is-scroll-top');

            } else {

                if (header.hasClass('is-scroll-top')) {

                    header.removeClass('is-scroll-top');

                }

            }

        // }

        last_scroll_point = scroll_point;

    });

}