在div中添加删除类

Question

我有一个标题，有2个位置1绝对和当您滚动固定我需要标题顺利滑入，当您滚动回顶部它会滑出..我无法得到它在滑动时只显示出来。

(function($) {   
 
    $(document).ready(function(){      
 
     $(window).scroll(function(){       
 
      if ($(this).scrollTop() > 300) { \t \t \t \t 
 
\t \t  \t \t $('.header').addClass('fixed'); 
 
\t   } else { 
 
\t \t \t \t $('.header').removeClass('fixed'); 
 
      } 
 
     }); 
 
    }); 
 
})(jQuery);

.header { 
 
    position: absolute; \t 
 
    width:100%; 
 
    height:86px; 
 
    background: red; 
 
    color: #fff; 
 
} 
 
.header.fixed { 
 
    width:100%; 
 
    height:66px; 
 
    position:fixed; 
 
    top:0px; 
 
    background:#000; 
 
    color: #fff; 
 
    -moz-transform: translateY(-130px); 
 
    -ms-transform: translateY(-130px); 
 
    -webkit-transform: translateY(-130px); 
 
    transform: translateY(-130px); 
 
    transition: transform .5s ease; 
 
} 
 
.header.fixed { 
 
    -moz-transform: translateY(0); 
 
    -ms-transform: translateY(0); 
 
    -webkit-transform: translateY(0); 
 
    transform: translateY(0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="header"> 
 
    <span>My Div</span> 
 
    </div> 
 
    <div style="height: 2000px; background-color: grey;">Content</div>

Answer 1

我去解决方案之前，最好还是使用left: 0, right: 0使绝对元素100% width比width: 100%。

改变.fixed到您的样式：

.header.fixed { 
    position: fixed; 
    // absolute 100% width 
    left: 0; 
    right: 0; 
    height:66px; 
    background:#000; 
    color: #fff; 
    // the slide animation when fixed class appears 
    animation: headerSlideIn 0.5s ease; 
    animation-fill-mode: forwards; 
    animation-iteration-count: 1; 
} 

// the slide in animation 
@keyframes headerSlideIn { 
    0% { 
    // make it start -66px which is away from your screen 
    top:-66px; 
    } 

    100% { 
    // the key to your animation 
    top: 0; 
    } 
} 

因此它会给你想要的结果。如果您不喜欢top实施，因为它在移动设备上出现问题，只需将其替换为transform: translateY()并将其设置为top: 0即可。

而且旧的代码不工作的原因是：

// you overwritten your style above with 0 which simply doesn't do anything 
.header.fixed { 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -webkit-transform: translateY(0); 
    transform: translateY(0); 
} 

希望帮助。

(function($) {   
 
    $(document).ready(function(){      
 
     $(window).scroll(function(){ 
 
      if ($(this).scrollTop() > 300) 
 
      { 
 
       $('.header').removeClass('slide-back'); 
 
\t \t  \t \t  $('.header').addClass('fixed'); 
 
\t   } 
 
      else if ($(this).scrollTop() == 0) 
 
      { 
 
\t \t \t \t  $('.header').removeClass('fixed'); 
 
      } 
 
     }); 
 
    }); 
 
})(jQuery);

.header { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    height:86px; 
 
    background: red; 
 
    color: #fff; 
 
    transition: all 0.5s ease; 
 
} 
 

 
.header.fixed { 
 
    position: fixed; 
 
    height: 66px; 
 
    background: #000; 
 
    color: #fff; 
 
    animation: headerSlideIn 0.5s ease; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: 1; 
 
} 
 

 
@keyframes headerSlideIn { 
 
    0% { 
 
    top:-66px; 
 
    } 
 
    
 
    100% { 
 
    top: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="header"> 
 
    <span>My Div</span> 
 
    </div> 
 
    <div style="height: 2000px; background-color: grey;">Content</div>

如果您滚动备份