Header animated

by cintia_rodrigues

HTML

<div class="m-hdr">
    <div class="container">
        <div class="m-wrpp">
                <a  href="https://www.altroconsumo.it" target="_blank" class="brand">
                    <img src="~/Content/Images/logo.png" title="Página inicial">
                </a>
            
        </div>
    </div>
</div>
    
    * Montar o header e aplicar-lheuma class sticky

CSS

.m-hdr {
    position: relative;
    width: 100%;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: box-shadow ease 500ms;
    -moz-transition: box-shadow ease 500ms;
    -ms-transition: box-shadow ease 500ms;
    -o-transition: box-shadow ease 500ms;
    transition: box-shadow ease 500ms;
    height: 83px;
    /*set animation*/
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.m-hdr.sticky {
        position: fixed;
        font-size: 24px;
        line-height: 48px;
        height: 60px;
        width: 100%;
        background: #ccc;
        text-align: left;
        padding-left: 20px;
        z-index: 5;
        border-bottom: 2px solid #ff747e;
    }

JavaScript

$(window).scroll(function () {
    if ($(this).scrollTop() > 1) {
        $('.m-hdr').addClass("sticky");
        $('.wgt-counter, .txt-social').hide();
    }
    else {
        $('.m-hdr').removeClass("sticky ");
        $('.wgt-counter, .txt-social').show();
    }
});