根据滚动动态调整div高度答案

【问题标题】：Adjust div height dynamically based on scroll根据滚动动态调整div高度
【发布时间】：2015-06-23 14:29:30
【问题描述】：

我知道有一种非常简单的方法可以做到这一点，但我似乎在搜索中找不到任何东西。

我发现了很多示例，这些示例可以到达页面上的某个滚动位置，然后将 div 设置为不同的大小，但是我想根据滚动位置调整 div 的最大高度。最初我希望 div 最大高度约为 150 像素，然后当您从页面下方约 200 像素滚动到页面下方 400 像素时，我希望 div 的最大高度减少到 75 像素。然后很明显，当您向上滚动时，它会变大。

我无法提供我已经尝试过的示例，因为我还没有尝试过，因为我不知道从哪里开始。

注意：大小应随着滚动位置逐渐调整。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我不确定我是否理解你的问题，但是当我明白了这个问题时：D

$(window).scroll(function(){
  var scrollTop = $(window).scrollTop();
  if(scrollTop < 200){
    maxHeight = 150;
  }else if(scrollTop > 400){
    maxHeight = 75;
  }else{
    maxHeight = 150 - 75 * (((scrollTop-200) * 100)/200)/100;
  }
  $('#thediv').stop().animate({'max-height': maxHeight+"px"}, 500);
})

这里有一个示例：https://jsfiddle.net/keccs4na/

【讨论】：

我已将此标记为已回答，尽管我已将动画长度更改为 1，因此它已经足够接近即时了。 jsfiddle.net/x5a3hyyz/2
你能解释一下它背后的数学原理吗？我似乎无法理解它是如何工作的？
我已经更新了没有动画的示例并简化了数学。数学计算 200 到 400 之间的滚动比率并应用于 75。例如：如果 scrollTop 为 245，则比率将为 (245-200) / 200 => 45 /200 = 0.225。之后，我们将比率应用于 75 : 75 * 0.225 = 16.875。这意味着 div 将小 16.875。

【解决方案2】：

你可以试试这个：

$(window).on('scroll', function() {
    var scrollTop = $(window).scrollTop();

    if (scrollTop >= 200 && scrollTop <= 400) {
        $('#divID').stop().animate({height: "75px"}, 250);
    } else {
        $('#divID').stop().animate({height: "150px"}, 250);   
    }
});

注意：您需要使用 CSS 将高度初始设置为 150px。

【讨论】：

这不是逐渐调整的。我见过这样的例子，但我不喜欢到达设定点然后制作动画的效果。理想情况下，我希望它在您滚动时进行调整。因此，如果您仅在 2 个点之间滚动一半，它只会在最小和最大尺寸之间调整高度。请参阅此处以获取我想尝试做的示例kriesi.at/themes/enfold
我已经批准了您的编辑，抱歉让您感到困惑，但是我认为这行解释了它“我发现了很多示例，可以到达页面上的某个滚动位置，然后为 div 设置动画不同的大小，但是我想根据滚动位置调整 div 的最大高度。”。再次道歉。
哈哈确实如此。我认为该说明只会提供进一步的说明，因为这两个答案基于相同的逻辑。您将需要执行某种数学函数来计算具有该位置最大尺寸的滚动位置。仍在调查中。
不用担心。谢谢老兄。

【解决方案3】：

试试这个。

$(window).on('scroll', function () {
    var v = $(window).scrollTop();
    if (v > 200) {
        $('#id-of-div').css({"height": "75px","max-height":"75px"});
    }
    else {
        $('#id-of-div').css({"height": "150px","max-height":"150px"});
    }
});

编辑：

   $(window).on('scroll', function () {
        var v = $(window).scrollTop();
        if (v > 200) {
            $('#id-of-div').animate({"height": "75px","max-height":"75px"},500);
        }
        else {
            $('#id-of-div').animate({"height": "150px","max-height":"150px"},500);
        }
    });

【讨论】：

这似乎只是从一种尺寸跳到另一种尺寸，而不是在它们之间缓和。
@BN83 是的，我已经添加了一个编辑，这应该使它的效果更平滑。