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

Question

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

当用户加载页面时，div 的高度为 500px，当他滚动时，div 动态地降低他的高度直到达到 200px，然后 div 不再降低高度，一直停留在页面顶部并且页面的其他内容在此 div 下方流动。

抱歉我的英语不好，我的母语是西类牙语。

非常感谢!

Answer 1

你可以使用.css()

$(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>

您还可以在 css 中使用 add/removeClass 和 transition-duration

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

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>