1
我有一個標題,有2個位置1絕對和當您滾動固定我需要標題順利滑入,當您滾動回頂部它會滑出..我無法得到它在滑動時只顯示出來。在div中添加刪除類
(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>
它不滑出它只是消失 – Codi
有到回來,因爲用戶是移動的滑動滾動條沒有什麼好辦法,你會看到一個非常糟糕的低迷動畫。你需要即興地提出你將如何解決這個問題,其中一個將在到達'scrollTop == 0'末尾而不是'scrollTop <300'時移除'fixed'類,或者只是簡單地將其固定爲位置默認。更新了'scrollTop == 0'解決方案的答案。 – masterpreenz