带有窗口滚动的 Jquery 动画

Question

我正在尝试在 div 上制作 javascript 效果，例如车库门。 基本上我会在后面有一个 div，在前面有另一个 div，它会在窗口滚动时从底部缩小到顶部。

我有一个 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);
    });
});

非常感谢你

Answer 1

如果你设置了

position:fixed;

在#container 上，滚动条移动时它会静止不动。 然后在您的文档就绪功能中，确保有足够的滚动空间：

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