我有一个 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;
}
}
有任何想法吗?谢谢!