2017-09-25 76 views
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>

回答

1

我去解決方案之前,最好還是使用left: 0, right: 0使絕對元素100% widthwidth: 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>

如果您滾動備份
+0

它不滑出它只是消失 – Codi

+0

有到回來,因爲用戶是移動的滑動滾動條沒有什麼好辦法,你會看到一個非常糟糕的低迷動畫。你需要即興地提出你將如何解決這個問題,其中一個將在到達'scrollTop == 0'末尾而不是'scrollTop <300'時移除'fixed'類,或者只是簡單地將其固定爲位置默認。更新了'scrollTop == 0'解決方案的答案。 – masterpreenz