jQuery的：平滑寬度改變上滾動

我有一個工作jQuery代碼：jQuery的：平滑寬度改變上滾動

$(document).ready(function(){  
      var scroll_pos = 0; 
      $(document).scroll(function() { 
       scroll_pos = $(this).scrollTop(); 
       if(scroll_pos < 10) { 
        $("div").css('width', 75); 
       } else if(scroll_pos > 25 && scroll_pos < 75) { 
        $("div").css('width', 100); 
       } else if(scroll_pos > 75 && scroll_pos < 100){ 
        $("div").css('width', 125); 
       }else if(scroll_pos > 100){ 
        $("div").css('width', 150); 
     } 
    }); 
});

和與寬度的div元素：在啓動960x75像素。

當用戶向下滾動潛水元素時，通過四個步驟將寬度從75px改變爲150px，但是我正在尋找一些能夠平滑地將寬度從75px改變爲150px的東西，沒有任何想法？

來源

2014-12-24 Belhor

你能在這個環節HTTP添加HTML contetn ：//jsfiddle.net/msasozbg/ – user00000341

http://jsfiddle.net/msasozbg/6/ – Belhor

而不是'.css'使用'.animate'。 [類似這樣]（http://jsfiddle.net/anpsmn/msasozbg/8/） – anpsmn

也許這個解決方案是試圖得到什麼：

$(document).ready(function(){  
    var scroll_pos = 0; 
    $(document).scroll(function() { 
     scroll_pos = $(this).scrollTop(); 
     if (scroll_pos > 150) { 
      scroll_pos = 150; 
     }; 
     $("div").animate({ 
      width : (75+0.75*scroll_pos)+"px" 
     }); 
    }); 
});

來源

2014-12-24 05:38:44 Banzay

這很好，但如何停止在150px？現在它變得越來越大:) – Belhor

使用if-else條件，如果它小於或等於150px，將允許擴展。 –

答案已經改變。 – Banzay

您可能正在尋找jQuery中的.animate()。只需使用動畫更改滾動div的大小即可。

$(document).ready(function(){  
    $(document).scroll(function() { 
     $("div").animate({ 
      width : "150px" 
     }); 
    }); 
});

對於滾動寬度的連續增量嘗試這種方式。這將使每個卷軸的div寬度增加30px，並將增加，直到達到150px。

$(document).ready(function(){ 
    $(document).scroll(function() { 
     if($("div").width() <= "150"){ 
      $("div").animate({ 
       width : "+=30" 
      }); 
     } 
    }); 
});

jsFiddle

參考文獻：.scroll()，.animate()

來源

2014-12-24 05:23:21

當你向下滾動大小不會減少。 –

@Prashant，如果你仔細注意，我的'jsFiddle'有評論說這個測試用例是用於增量處理的。我只是展示了一種完成工作的方式。不會去做你的家庭工作。如果你已經低估了，那麼你需要更強的理由。 –

我檢查了問題，用戶不想重置或減少寬度。我會在一段時間後投票回答你的答案。 –

jQuery的：平滑寬度改變上滾動

回答

相關問題