javascript - 在窗口滚动时更改 div 宽度

Question

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

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

JSFiddle Code

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