jQuery 在滚动时更改 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28676253/
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
changing div height on scroll
提问by YSbakker
What I want is a div at the top (header) that will be at maximum height (50px) when you first load the page, and when you're scrolling down the page I want the height to smoothly decrease to a minimun height of 30px. I'm guessing I should use jQuery for this but I'm not that experienced so I don't know a solution at the moment.
我想要的是顶部（标题）的 div，当您第一次加载页面时，它将处于最大高度（50 像素），当您向下滚动页面时，我希望高度平滑地降低到 30 像素的最小高度. 我猜我应该为此使用 jQuery，但我没有那么有经验，所以我目前不知道解决方案。
Here's my current, undeveloped HTML and CSS:
这是我当前未开发的 HTML 和 CSS：
[HTML]
[HTML]
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!-- Header -->
<div id="header_parent">
</div>
<!-- Body (homepage) -->
<div id="body_parent">
</div>
<!-- Footer -->
<div id="footer_parent">
</div>
</body>
</html>
[CSS]
[CSS]
* {
margin:0 auto;
padding:0;
}
#header_parent {
max-width:1250px;
min-width:750px;
height:50px;
}
So to be clear, the #header_parentelement is what I'm talking about.
所以要清楚，#header_parent元素就是我所说的。
I also found a website on which they achieved this matter: tvgids.tv(don't look at the content, it's they upper grey header I'm talking about. I tried looking at the source code but that didn't give me any more knowledge.)
我还找到了一个网站，他们在上面解决了这个问题：tvgids.tv（不要看内容，我说的是他们上面的灰色标题。我尝试查看源代码，但没有给我任何更多的知识。）
回答by quead
I've added to #body_parent height to see the scroll, you can delete that row with height after you create the site.
我已添加到 #body_parent 高度以查看滚动，您可以在创建站点后删除具有高度的那一行。
Here is jsfiddle
这是jsfiddle
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > 50) {
$('#header_parent').stop().animate({height: "30px"},200);
}
else {
$('#header_parent').stop().animate({height: "50px"},200);
}
});* {
margin:0 auto;
padding:0;
}
#header_parent {
max-width:1250px;
min-width:750px;
height:50px;
background:#000;
position:fixed;
}
#body_parent {
height:1200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<!-- Header -->
<div id="header_parent">
</div>
<!-- Body (homepage) -->
<div id="body_parent">
</div>
<!-- Footer -->
<div id="footer_parent">
</div>
</body>Or HTML
或 HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!-- Header -->
<div id="header_parent">
</div>
<!-- Body (homepage) -->
<div id="body_parent">
</div>
<!-- Footer -->
<div id="footer_parent">
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Your jQuery/Javascript code -->
<script type="text/javascript">
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > 50) {
$('#header_parent').stop().animate({height: "30px"},200);
}
else {
$('#header_parent').stop().animate({height: "50px"},200);
}
});
</script>
</body>
</html>
And if you want to set smoothness replace 200 with your number, 200 mean duration in miliseconds.
如果您想设置平滑度，请将 200 替换为您的数字，200 平均持续时间（以毫秒为单位）。
$('#header_parent').stop().animate({height: "50px"},200);
回答by psdpainter
You can do this without jQuery.
你可以在没有 jQuery 的情况下做到这一点。
var header = document.getElementById("header_parent");
window.onscroll = function(e) {
if(window.scrollY) {
if(window.pageYOffset > 50) {
header.style.height = 30;
} else {
header.style.height = 50;
}
}
}
You could also toggle class names inside the ifblock instead of setting the height explicitly.
您还可以在if块内切换类名，而不是显式设置高度。
