Question

我知道有一种非常简单的方法，但我似乎无法在搜索中找到任何内容。

我找到了很多关于到达页面上某个滚动位置然后将div设置为不同大小的示例，但是我想根据滚动位置调整div的最大高度。最初我希望div max-height大约是150px，然后当你从页面向下200px滚动到页面下400px时，我希望div的最大高度减小到75px。然后，当你向后滚动时，它会变得更大。

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

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

Answer 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/

Answer 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。

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

根据滚动动态调整div高度

3 个答案: