更改滚动上的div高度 [英] changing div height on scroll
问题描述
我想要的是在顶部(标头)的div，它在您首次加载页面时处于最大高度(50px)，并且当您向下滚动页面时，我希望高度平滑地减小到最小高度为30px.我猜我应该为此使用jQuery，但是我没有那么丰富的经验，所以我目前不知道解决方案.
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.
这是我当前未开发的HTML和CSS:
Here's my current, undeveloped HTML and CSS:
[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]
* {
margin:0 auto;
padding:0;
}
#header_parent {
max-width:1250px;
min-width:750px;
height:50px;
}
很明显，我要说的是#header_parent元素.
So to be clear, the #header_parent element is what I'm talking about.
我还找到了一个他们解决此问题的网站: tvgids.tv (不要看内容，这是我在说的它们的上方灰色标头.我尝试看了一下源代码，但这并没有给我带来更多的知识.)
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.)
推荐答案
我已添加到#body_parent高度以查看滚动条，创建站点后可以删除具有高度的行.
I've added to #body_parent height to see the scroll, you can delete that row with height after you create the site.
这是jsfiddle
Here is 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>
或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>
如果要设置平滑度，请用数字替换200，以毫秒为单位的平均持续时间为200.
And if you want to set smoothness replace 200 with your number, 200 mean duration in miliseconds.
$('#header_parent').stop().animate({height: "50px"},200);
这篇关于更改滚动上的div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
