我想要的是顶部（标题）的 div，当您第一次加载页面时，它将处于最大高度（50px），当您向下滚动页面时，我希望高度平滑地降低到 30px 的最小高度。我猜我应该使用 jQuery，但我没有那么丰富的经验，所以我现在不知道解决方案。
这是我当前未开发的 HTML 和 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元素就是我所说的。
我还找到了一个他们实现这件事的网站：tvgids.tv（不要看内容，我说的是上面的灰色标题。我尝试查看源代码，但这并没有给我更多的知识。）
我已添加 #body_parent 高度以查看滚动，您可以在创建网站后删除该行的高度。
这是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>
<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 表示持续时间（以毫秒为单位）。
$('#header_parent').stop().animate({height: "50px"},200);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
