美好的一天!我是新来的!现在,对不起您的愚蠢:-)
功能:向下滚动时,标题变为可见。滚动到顶部时隐藏。代码可以工作,但是我不能使用removeClass进行柔和的淡出。有人可以帮我吗?
<script type="text/javascript">
jQuery( document ).ready(function() {
var header_fixed = jQuery(".header-fixed")
jQuery( header_fixed ).wrap( "<div class='header-f-wrapper'></div>" );
var header_f_wrapper = jQuery (".header-f-wrapper");
var height = jQuery(".et-l--header").height()+(20);
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop()>height){
header_f_wrapper.addClass("header-show");
}
else{
header_f_wrapper.removeClass("header-show");
}
})
})
</script>
<style>
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.header-f-wrapper {
display:none;
}
.header-f-wrapper {
z-index: 999; /* display at the top */
position: fixed;
width:100%;
top: 0;
-webkit-animation: fadein 0.9s ease-in;
-moz-animation: fadein 0.9s ease-in;
animation: fadein 0.9s ease-in;
}
.header-f-wrapper.header-show {
display:block;
}}
}}
</style>
您为什么不使用jQuery fadeOut和fadeIn函数? :https://api.jquery.com/fadeOut/,这是官方文档链接,以您而言,这可能可行:
if(jQuery(this).scrollTop()>height){
header_f_wrapper.fadeIn('slow',function(){
//do something here
}else{
header_f_wrapper.fadeOut('slow',function(){
//do something else here
});
}
我不知道这种方法是否能正常工作,因为我不知道确切的情况,但希望您能从中得到帮助