Sticky Header with Fade.txt

@link https://www.youtube.com/watch?v=oanr6o_Ty1c

/*** CSS
@link https://gist.github.com/gutenberghub/b278a76419c9f84b73c911b62156d2d4
–––––––––––––––––––––––––––––––––––––––––––––––––– ***/
.sticky-wrapper {
    position: fixed;
    top: 3%;
    left: 0%;
    z-index: 2;
    width: 100% !important;
    background: #fff;
}

/*** JavaScript
@link https://gist.github.com/gutenberghub/8ebf28acd020874020f02540f385acc8
–––––––––––––––––––––––––––––––––––––––––––––––––– ***/
$(document).ready(function(){
        $(window).scroll(function(){
            if($(this).scrollTop() >= 400){
                $('.sticky-wrapper').fadeIn();
            }else if($(this).scrollTop() === 0){
                $('.sticky-wrapper').fadeIn();
            } else{
                $('.sticky-wrapper').fadeOut();
            }
        });

        $('.sticky-wrapper').click(function(){
            $('html, body').animate({scrollTop: 0}, 600);
            return false;
        });
    });