Question

我正在尝试为滚动时出现和消失的类设置动画。

然而，不透明度仅适用于首次向上滚动，向下滚动时不会将不透明度恢复为0 ...任何人都可以帮助我吗？

$(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');
    }
});

编辑（html篇）：

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

编辑（css篇）：

    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

您正在删除shortResize类，然后在下一个语句中尝试选择它，请参阅修复版本：

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

Answer 2

你能试试吗？

<强>更新

$(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);
            });
        });
    }

jQuery'roll（）;'动画不会恢复

2 个答案: