通過滾動使動畫元素變得更寬更高動畫元素

我想讓頁面的標題（類標題）在屏幕頂部滾動顯示時平鋪到屏幕頂部的欄（類scrollToTop）中。現在，我使用的代碼使得當我通過標題時出現條形（帶有背景色的無文本鏈接），但我希望在滾動標題時使其緩慢出現。爲了澄清，當標題到達屏幕的頂部並且一旦標題完全離屏時完成出現（具有最終高度和100％寬度），它將開始出現（具有標題的寬度和最小高度）。我還希望它在滾動時反轉。通過滾動使動畫元素變得更寬更高動畫元素

這裏是我的代碼：

<a href="#top" class="scrollToTop"></a> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      var startY = $('.title').position().top + $('.title').outerHeight(); 
      $(window).scroll(function(){ 
       checkY(); 
      }); 

      function checkY(){ 
       if($(window).scrollTop() > startY){ 
        $('.scrollToTop').slideDown(); 
       }else{ 
        $('.scrollToTop').slideUp(); 
       } 
      } 
      checkY(); 
     }); 
    </script>

感謝，讓我知道如果你需要任何更多的信息。

來源

2013-08-04 retreat

類似這樣的http://jsfiddle.net/pH7u5/？其基本思想是把「無文字欄鏈接」的標題下，用CSS固定在頂部：

.title { 
    position: relative; 
    z-index: 2; 
    margin-bottom: 0; 
    /* style options here */ 
} 

.scrollToTop { 
    position: fixed; 
    display: block; 
    z-index: 1; 
    /* style options here */ 
}

當頭滾動過去的「無文字欄鏈接」字樣，但低於標題：

$(window).scroll(function(){ 
    var offset = $(".title").offset(); 
    var posY = offset.top - $(window).scrollTop(); 
    $(".scrollToTop").css("visibility", posY <= 0 ? "visible" : "hidden"); 
}).trigger("scroll");

只有一次頭球關閉屏幕遠遠不夠，鏈接變得可見，表現爲如果頭縮小到那個高度。 JSFiddle包含CSS進行評論，因此您可以更輕鬆地看到這是如何工作的。

如果您需要更復雜的處理，我建議先看看Scroll to Fixed。您應該能夠通過將其應用於.scrollToTop並再次將其移動到標題元素後面來模擬所需的效果。

來源

2013-08-04 16:35:22

謝謝你的回答。雖然我沒有在上面解釋得很清楚，但當我向下滾動標題時，我還想讓粘性標題在屏幕寬度上展開。它將從屏幕寬度的20％開始，並且當您滾動展開至100％寬度。你能幫忙嗎？無論哪種方式再次感謝。 – retreat

簡單：'var tweak = 50; var widthPerc = Math.max（0，Math.min（100，-posY * tweak/100））; $（「。scrollToTop」）.css（「width」，widthPerc +「％」）;'。將此添加到滾動事件偵聽器。它基本上將剩餘的寬度用於頭元素的頂部，並從中計算出一個百分比。使用調整來設置它應該如何提前/快速擴展。我還沒有制定出邏輯，所以我稱之爲「調整」。 –

太棒了，非常感謝。 – retreat

通過滾動使動畫元素變得更寬更高動畫元素

回答

相關問題