Javascript 更改窗口滚动条上的div宽度

我正在尝试在div上制作一个javascript效果，就像车库门一样。
基本上，我会在后面有一个绝对的div，在前面有一个div，它会从底部到顶部收缩到窗口学校

我发现了一个类似的JSFIDLE，但它是在宽度上而不是高度上进行的，我希望div顶部保持固定，从下到上收缩

HTML
我的中锋。。。
CSS
#添加{
背景：#eee；
高度：2000px；
溢出：隐藏；
}
#容器{
宽度：800px；
高度：2000px；
背景色：#567；
保证金：0自动；
位置：相对位置；
}
JS
$（窗口）。调整大小（函数（）{
$（“#容器”）.css({
顶部：（$（窗口）.height（）-$（“#容器”）.outerHeight（））/2
});
});
//要最初运行该函数，请执行以下操作：
$（窗口）.resize（）；
var$scrollingDiv=$（“#容器”）；
$（窗口）。滚动（函数（）{
var winScrollTop=$（窗口）.scrollTop（）+0，
zeroSizeHeight=$（文档）.height（）-$（窗口）.height（），
newSize=800*（1-（winScrollTop/zeroSizeHeight））；
$scrollingDiv.css({
宽度：新闻大小，
“marginTop”：winScrollTop+“px”
}，500，'easeInOutSine'）；
});

任何帮助都将不胜感激

谢谢你

你可以试试：

var $scrollingDiv = $("#container"),
    defaultHeight = parseInt($scrollingDiv.css('height')); // whatever is in your css as
$(window).scroll(function() {
    var winScrollTop = $(window).scrollTop() + 0,
        zeroSizeHeight = $(document).height() - $(window).height(),
        newSize = defaultHeight * (1 - (winScrollTop / zeroSizeHeight));

    $scrollingDiv.css({
        height: newSize,
        "marginTop": winScrollTop + "px"
    }, 500, 'easeInOutSine');
});

---

将两者都设置为

auto

CSS

---

它自动添加滚动条，无需应用java脚本

谢谢Tronix，这正是我想要的。现在唯一的问题是，如何使文本随div一起消失？非常感谢。我真的不明白你的意思，当div变小时，文本应该隐藏起来，不是吗？否则，请尝试将CSS:

溢出：隐藏添加到此div。它现在工作正常。另外，是我还是它不在chrome或任何浏览器上工作，尽管它在JSFIDLE上工作得很好。感谢不要忘记包含jQuery:
，并将javascript代码放在其中：
jQuery（函数（$）{…您的代码放在那里…}）我已经复制了与JSFIDLE中完全相同的东西，但它的行为完全不一样。我有正确的jQuery库，并且我已经将代码包装在jQuery中（函数（$）{…}）；我仍然没有得到同样的结果。我的眼睛没有像应该的那样缩小。我不知道还能做什么：s
var $scrollingDiv = $("#container"),
    defaultHeight = parseInt($scrollingDiv.css('height')); // whatever is in your css as
$(window).scroll(function() {
    var winScrollTop = $(window).scrollTop() + 0,
        zeroSizeHeight = $(document).height() - $(window).height(),
        newSize = defaultHeight * (1 - (winScrollTop / zeroSizeHeight));

    $scrollingDiv.css({
        height: newSize,
        "marginTop": winScrollTop + "px"
    }, 500, 'easeInOutSine');
});

#added { 
         background: #eee;
         height: auto;
         width: auto;
       }