Stick Div

<!-- html -->

<div class="sticky_anchor"></div>

/* css */

.sticky{
    position: fixed;
    top: 0;
    z-index: 2;
    background: #fff;
    width: 100%;
    -webkit-animation: sticky .5s;
    animation: sticky .5s;
}
@-webkit-keyframes sticky {
    0%   {
        top: -100px;
        opacity: 0;
    }
    100%   {
        top: 0;
        opacity: 1
    }
}

@keyframes sticky {
    0%   {
        top: -100px;
        opacity: 0;
    }
    100%   {
        top: 0;
        opacity: 1
    }
}
#sticky_anchor.active{
    height: 83px;
    width: 100%;
    -webkit-transition: .9s;
    -o-transition: .9s;
    transition: .9s;
}

//js


    $(window).on('scroll',function(){
            if($(window).scrollTop()>10){
                $('.stick').addClass('sticky');
                $('#sticky_anchor').addClass('active');
            }
            else{
                $('.stick').removeClass('sticky');
                $('#sticky_anchor').removeClass('active');
            }
        
    });