使用滚动折叠div直到某一点

Question

我想在用户向下滚动页面时折叠div。

当用户加载页面时，div的高度为500px，当他滚动时，div会将其高度减小到达到200px，然后div不再降低高度，保持卡在页面顶部和页面的其他内容在此div下面流动。

对不起我的英语，母语是西班牙语。

非常感谢！

Answer 1

您可以使用$(document).ready(function(){ $(window).on('scroll' , function(){ var windowTop = $(window).scrollTop(); if(windowTop > 500){ $('.header').css({'position':'fixed','height': '200px'}); }else{ $('.header').css({'position':'relative','height': '500px'}); } }); });

html,body{
	margin: 0;
	padding: 0;
}
.content{
	width: 100%;
	height: 200px;
	background-color: red;
	color: white;
	border: 1px solid black;
}
.header{
	width: 100%;
	height: 500px;
	background-color: blue;
	color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
	<h1>Heading</h1>
</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>

$(document).ready(function(){
   $(window).on('scroll' , function(){
     var windowTop = $(window).scrollTop();
     if(windowTop > 500){
         $('.header').addClass('scrolled');
     }else{
         $('.header').removeClass('scrolled');
     }
   });
});

您还可以在css中使用带有转换持续时间的add / removeClass

html,body{
	margin: 0;
	padding: 0;
}
.content{
	width: 100%;
	height: 200px;
	background-color: red;
	color: white;
	border: 1px solid black;
}
.header{
	width: 100%;
	height: 500px;
	background-color: blue;
	color: white;
    transition-duration : 1s;
}

.header.scrolled{
  position : fixed;
  top:0;
  left:0;
  right:0;
  height : 200px;
  transition-duration : 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
	<h1>Heading</h1>
</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>

arrange