javascript 根据滚动动态调整div高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31005636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adjust div height dynamically based on scroll
提问by BN83
I know there's a pretty simple way of doing this, but I can't seem to find anything in my searches.
我知道有一种非常简单的方法可以做到这一点，但我似乎在搜索中找不到任何东西。
I've found lots of examples of getting to a certain scroll location on the page and then animating a div to a different size, however I want to adjust a div's max height depending on the scroll location. Initially i'd like the div max-height to be about 150px, and then as you scroll from around 200px down the page to 400px down the page, I want the max-height of the div to decrease to 75px. Then obviously as you scroll back up, it gets larger.
我发现了很多到达页面上某个滚动位置然后将 div 动画化为不同大小的示例，但是我想根据滚动位置调整 div 的最大高度。最初我希望 div 的最大高度约为 150 像素，然后当您从页面向下大约 200 像素滚动到页面向下 400 像素时，我希望 div 的最大高度减少到 75 像素。然后很明显，当您向上滚动时，它会变大。
I can't provide an example of what I've tried already, as I'm yet to attempt it as I have no idea on where to start.
我无法提供我已经尝试过的示例，因为我还没有尝试过，因为我不知道从哪里开始。
Note:The size should gradually adjust with the scroll position.
注意：大小应随着滚动位置逐渐调整。
回答by Babesh Florin
I'm not sure if I understood your problem, but when I did I came out with this :D
我不确定我是否理解您的问题，但是当我理解时，我想出了这个：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);
})
Here you have a sample : https://jsfiddle.net/keccs4na/
这里有一个示例：https: //jsfiddle.net/keccs4na/
回答by NightOwlPrgmr
You could try this:
你可以试试这个：
$(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);
}
});
Note:You'll want to use CSS to initially set the height to 150px.
注意：您需要使用 CSS 将高度初始设置为150px。
回答by Varun
Try this.
试试这个。
$(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"});
}
});
EDIT:
编辑：
$(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);
}
});
