Question

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

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

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脚本

在窗口滚动上更改div宽度

2 个答案: