javascript - 更改窗口滚动上的 div 宽度

Question

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

我找到了一个类似的 jsfiddle，但它是在宽度上而不是在高度上做的，我希望 div 顶部保持固定并从下到上收缩。

JSF中间代码

HTML
<div id="added">

<div id="container">
  My center div...
</div>

</div>

CSS
#added { 
    background: #eee;
    height: 2000px;
    overflow:hidden;
}
#container {
  width: 800px;
  height: 2000px;
  background-color: #567;
  margin: 0 auto;
  position:relative;
}

JS
$(window).resize(function() {
    $('#container').css({
        top: ($(window).height() - $('#container').outerHeight()) / 2
    });
});



// To initially run the function:
$(window).resize();


var $scrollingDiv = $("#container");
$(window).scroll(function() {
    var winScrollTop = $(window).scrollTop() + 0,
        zeroSizeHeight = $(document).height() - $(window).height(),
        newSize = 800 * (1 - (winScrollTop / zeroSizeHeight));

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

任何帮助将不胜感激。

谢谢你

Answer 1

你可以试试：

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');
});

Answer 2

将两者设置为auto

CSS

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

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