Question

I am trying to animate an class that appear and disappear on scroll.

However opacity works only on first scroll up and on scroll down it doesn’t restore opacity back to 0… Anyone can help me please?

$(window).scroll(function () {
    if ($(this).scrollTop() > 70) {
        $('header').addClass('shortResize');
        $('.shortResize').animate({ 'opacity': '1' });
        $('section#contentWrap').addClass('contentWrap-margin');
    } else {
        $('header').removeClass('shortResize');
        $('.shortResize').css('opacity', '0');
        $('section#contentWrap').removeClass('contentWrap-margin');
    }
});

EDIT (html piece):

<header>
    <a id="logo" href="index.php"></a>
</header>

EDIT (css piece):

    header {
    background: -webkit-linear-gradient(bottom, rgba(61, 61, 61, .9) 50%, rgba(76, 76, 76, .9) 50%);
    position: relative;
    margin-top: 70px;
    width: 100%;
    height: auto;
    padding: 10px 0px;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .5);
}

a#logo {
    background: url(../img/logo.png);
    width: 629px;
    height: 70px;
    margin: auto;
    display: block;
}

.shortResize {
    position: fixed !important;
    opacity: 0;
    width: 100% !important;
    height: auto;
    padding: 10px 0px;
    top: 0;
    left: 0;
    margin: 0 !important;
    border-radius: 0px !important;
    z-index: 33;
}

.contentWrap-margin {
    margin-top: 160px;
    border-radius: 5px;
}

Answer 1

Can you please try this?

UPDATE

$(window).scroll(function () {
        if ($(this).scrollTop() > 70) {
            $('header').addClass('shortResize');
            $('.shortResize').stop().animate({ 'opacity': '1' });
            $('section#contentWrap').addClass('contentWrap-margin');
        } else {
            console.log($(this).scrollTop());
            $('header').removeAttributes();
            $('section#contentWrap').removeClass('contentWrap-margin');
        }
    });



    jQuery.fn.removeAttributes = function () {
        return this.each(function () {
            var attributes = $.map(this.attributes, function (item) {
                return item.name;
            });
            var img = $(this);
            $.each(attributes, function (i, item) {
                img.removeAttr(item);
            });
        });
    }