我有一个 Headers 比我通过添加一个类动画 . 我的问题是它会降低动画效果,但不会备份 . 向后滚动它会消失而没有转换 .

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;
    }
}

有任何想法吗?谢谢!