CSS Transition不同时制作动画

Question

我有一个标题，但没有添加一个类来设置动画。我的问题是动画会下降，但不能后退。向上滚动它会消失，没有过渡。

HTML：

<header id="masthead-fixed" class="site-header">
header content here
</header>

滚动超过一定距离时，滚动触发JS。

经过某一点后：

jQuery('#masthead-fixed').addClass("stick"); 

超过该点时：

jQuery('#masthead-fixed').removeClass("stick"); 

无礼的人

header#masthead-fixed {
    position: fixed;
    top: -73px;
    opacity: 0;

    -webkit-transition: opacity 1s ease, top 1s ease;
    -moz-transition: opacity 1s ease, top 1s ease;
    -ms-transition: opacity 1s ease, top 1s ease;
    -o-transition: opacity 1s ease, top 1s ease;
    transition: opacity 1s ease, top 1s ease;


    &.stick {
        opacity: 1;
        top: 0;
    }
}

有什么想法吗？谢谢！