与jQuery一起淡出.removeClass

问题描述 投票:0回答:1

美好的一天!我是新来的!现在,对不起您的愚蠢:-)

功能:向下滚动时,标题变为可见。滚动到顶部时隐藏。代码可以工作,但是我不能使用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 css class
1个回答
0
投票

您为什么不使用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
         });
        }

我不知道这种方法是否能正常工作,因为我不知道确切的情况,但希望您能从中得到帮助

© www.soinside.com 2019 - 2024. All rights reserved.