jquery带有窗口滚动的动画

我想对像车库门这样的div做一个javascript效果。基本上我会在后面有一个div，前面有另一个div，它会从窗口滚动的底部到顶部收缩。jquery带有窗口滚动的动画

我有一个JSFiddle，只做我想做的事情，但我必须自己给出div大小，我希望大小根据窗口大小的滚动进行动态调整。

这里的jsfiddle：http://jsfiddle.net/onlymushu/gTsHf/ 和代码：

HTML 
<div id="container"> 
    <div id="contents"> 
     1. This is going to be very big line. 
     2. This is going to be very big line. 
     3. This is going to be very big line. 
     4. This is going to be very big line. 
     5. This is going to be very big line. 
     6. This is going to be very big line. 
     7. This is going to be very big line. 
     8. This is going to be very big line. 
    </div> 
</div> 
<button id="up">up</div> 
    <button id="down">down</div> 

CSS 
body{ 
    height: 1500px; 
} 
#container{ 
    margin: 0 auto; 
    width:400px; 
    height:300px; 
    background-color: red; 
    Position:relative;border:1px #000 solid; 
} 
#contents{ 
    width:400px; 
    height:300px; 
    position:absolute; 
    background-color: white; 
    overflow:hidden; 
} 

JS 
$(document).ready(function(){ 
    $("#up").click(function(){ 
     $("#contents").animate({height:"0px"},500); 
    }); 
    $("#down").click(function(){ 
     $("#contents").animate({height:"300px"},500); 
    }); 
});

谢谢你这么多

来源

2013-06-21 onlymushu

如果您在#container的设置

position:fixed;

会坐以待毙，而滚动条移动。然后在你的文件准备功能，确保有足够的空间用于滚动：

var minHeight = $("#container").height() * 4; 
if ($("body").height() < minHeight) $("body").height(minHeight);

而在滚动功能，使用滚动的百分比：

$(window).scroll(function() { 
    var newSize = $("#container").height() * (1 - $(window).scrollTop()/($(document).height() - $(window).height())); 
    $("#contents").css('height',newSize); 
});

我会建议在没有动画滚动功能，因为它会被频繁地调用。

我把更新your fiddle

来源

2013-06-21 21:52:24 Joe

我看着它在我的手机其似乎fairely简单的自由。非常感谢，我今晚会在电脑上查看它。我会记住你的建议。 – onlymushu

jquery带有窗口滚动的动画

回答

相关问题