使用 jQuery，如何在滚动时更改 div 的大小？答案

【问题标题】：Using jQuery, how can I change the size of a div as I scroll?使用 jQuery，如何在滚动时更改 div 的大小？
【发布时间】：2013-11-26 22:01:53
【问题描述】：

我在一个 3500 像素高的容器中有一个 500 像素宽的 div，当我向下滚动页面时，我希望 500 像素 div 的宽度慢慢减小到其原始宽度的一半。我在 jQuery 中使用 .scroll 所做的一切尝试都是在页面加载时而不是在页面向下滚动时改变宽度。

编辑我希望宽度随着页面的上下滚动而放大和缩小。

这是我开始的一个例子，我知道这显然不正确：

$(document).ready(function() {

$('#box').scroll(function() {
    $('#box').css('width', '250px');
});

});

【问题讨论】：

按照您编写代码的方式，它会在任何滚动时调整大小。您需要在回调函数中添加逻辑来评估位置（可能使用scrollTop()），然后相应地更改宽度。 . .可能是 (3500-scrollTop())/3500*500 或类似的东西。 . .

标签： javascript jquery

【解决方案1】：

这是一个工作小提琴，它动态改变它的宽度http://jsfiddle.net/CWe9t/1/

$(document).ready(function () {
    var initialWidth = $("#box").width();
    var minWidth = 250;

    $(document).scroll(function () {
        var x = initialWidth - (minWidth * ($(window).scrollTop()) / $("#box").height());
        $('#box').css('width', x);
    });
});

【讨论】：

【解决方案2】：

$(window).scroll(function() {
    $( "#box" ).animate({
        width: '250px'
    }, 5000, function() {
        // Animation complete.
    });
});

【讨论】：

【解决方案3】：

您是否在框滚动时调用滚动功能？不，你调用的是滚动函数的窗口

$(document).ready(function() {

$( **window** ).scroll(function() {
   $('#box').css('width', '250px');
 });
});

然后慢慢减小尺寸在你的盒子上应用这个 css3 属性

 #box
 {
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
 }

应用 css3 动画，因为如果同一页面上有许多动画，则动画会更流畅，如果这只是 @daguru 所说的一个简单动画，则 Jquery 动画会更流畅。

【讨论】：