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

Jquery动画与窗口滚动

1 个答案: