提前感谢您的帮助。
我看到了这个窗帘动画代码，在那里我做了一些修改，其中一个就是有一个按钮来拉开窗帘，并显示背后的内容。
我尝试添加方法scrollTop，但没有用。 ： - （
function curtain() {
var windowHeight = $( window ).height();
var scrollPosition = $( document ).scrollTop();
var value = - ( windowHeight );
var mainHeight = $( "#main" ).height();
var bodyHeight = windowHeight + mainHeight;
if (windowHeight - scrollPosition <= 0) {
$( "#curtain" ).css({position: "fixed", top: value});
$( "#main" ).css({position: "static", marginTop: windowHeight});
$('body').height(mainHeight);
}
else {
$( "#curtain" ).css({position: "static", height: windowHeight});
$( "#main" ).css({position: "fixed", top: value, marginTop: windowHeight});
$('body').height(bodyHeight);
}
}
$(document).ready(curtain);
$(window).resize(curtain);
$(window).scroll(curtain);* {
margin: 0;
padding: 0;
}
#curtain {
z-index: 1;
position: relative;
}
#curtain p {
position: absolute;
top: 4em;
width: 100%;
text-align: center;
}
#curtain a {
background-color: white;
color: black;
text-decoration: none;
padding: .8em 1em;
border-radius: 4px
}
#curtain img {
width: 100%;
height: 100Vh;
}
#main {
width: 100%;
z-index: -1;<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="curtain">
<p>
<a href="#" class="curtain-action">Show me the content</a>
</p>
<img src="http://dummyimage.com/600x400/000/fff">
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae metus tellus. Curabitur elementum mauris nec ligula dictum hendrerit. Integer ut magna congue, fermentum risus sed, facilisis erat. Proin mattis eros ac urna tincidunt ornare. Nulla non sapien volutpat, consequat erat id, ornare enim. Fusce metus enim, sodales id semper vel, gravida ut ante. Nulla rhoncus tortor neque, sit amet tincidunt nibh ullamcorper quis. Nulla ac erat et ipsum semper euismod. Vestibulum at fermentum neque. Sed congue lorem eros, scelerisque cursus magna auctor ut. Ut vitae sagittis urna. Duis id convallis velit.</p>
<p>Donec vestibulum est tempus, dictum mi sit amet, blandit orci. Cras mattis luctus augue. Integer varius venenatis neque. Nullam tempor dignissim massa, a vehicula dolor aliquam vestibulum. Maecenas ac neque a massa ultricies condimentum. Sed vehicula eleifend elit. Nunc blandit justo malesuada sagittis mollis. Vestibulum turpis massa, vestibulum ac libero nec, lobortis congue nisl.</p>
<p>Sed elementum eleifend tellus, in dapibus ligula volutpat sed. Curabitur rhoncus eu sapien placerat commodo. Aliquam posuere turpis in mauris pulvinar pulvinar. Praesent sed nisi vitae augue imperdiet dictum. Morbi ornare eros id mauris ultrices, vestibulum posuere ante tincidunt. Aliquam erat volutpat. Quisque erat turpis, faucibus at eros non, ornare fringilla lorem. Sed mollis cursus lectus sit amet consequat. Duis in sodales leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae metus tellus. Curabitur elementum mauris nec ligula dictum hendrerit. Integer ut magna congue, fermentum risus sed, facilisis erat. Proin mattis eros ac urna tincidunt ornare. Nulla non sapien volutpat, consequat erat id, ornare enim. Fusce metus enim, sodales id semper vel, gravida ut ante. Nulla rhoncus tortor neque, sit amet tincidunt nibh ullamcorper quis. Nulla ac erat et ipsum semper euismod. Vestibulum at fermentum neque. Sed congue lorem eros, scelerisque cursus magna auctor ut. Ut vitae sagittis urna. Duis id convallis velit.</p>
<p>Donec vestibulum est tempus, dictum mi sit amet, blandit orci. Cras mattis luctus augue. Integer varius venenatis neque. Nullam tempor dignissim massa, a vehicula dolor aliquam vestibulum. Maecenas ac neque a massa ultricies condimentum. Sed vehicula eleifend elit. Nunc blandit justo malesuada sagittis mollis. Vestibulum turpis massa, vestibulum ac libero nec, lobortis congue nisl.</p>
<p>Sed elementum eleifend tellus, in dapibus ligula volutpat sed. Curabitur rhoncus eu sapien placerat commodo. Aliquam posuere turpis in mauris pulvinar pulvinar. Praesent sed nisi vitae augue imperdiet dictum. Morbi ornare eros id mauris ultrices, vestibulum posuere ante tincidunt. Aliquam erat volutpat. Quisque erat turpis, faucibus at eros non, ornare fringilla lorem. Sed mollis cursus lectus sit amet consequat. Duis in sodales leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae metus tellus. Curabitur elementum mauris nec ligula dictum hendrerit. Integer ut magna congue, fermentum risus sed, facilisis erat. Proin mattis eros ac urna tincidunt ornare. Nulla non sapien volutpat, consequat erat id, ornare enim. Fusce metus enim, sodales id semper vel, gravida ut ante. Nulla rhoncus tortor neque, sit amet tincidunt nibh ullamcorper quis. Nulla ac erat et ipsum semper euismod. Vestibulum at fermentum neque. Sed congue lorem eros, scelerisque cursus magna auctor ut. Ut vitae sagittis urna. Duis id convallis velit.</p>
<p>Donec vestibulum est tempus, dictum mi sit amet, blandit orci. Cras mattis luctus augue. Integer varius venenatis neque. Nullam tempor dignissim massa, a vehicula dolor aliquam vestibulum. Maecenas ac neque a massa ultricies condimentum. Sed vehicula eleifend elit. Nunc blandit justo malesuada sagittis mollis. Vestibulum turpis massa, vestibulum ac libero nec, lobortis congue nisl.</p>
<p>Sed elementum eleifend tellus, in dapibus ligula volutpat sed. Curabitur rhoncus eu sapien placerat commodo. Aliquam posuere turpis in mauris pulvinar pulvinar. Praesent sed nisi vitae augue imperdiet dictum. Morbi ornare eros id mauris ultrices, vestibulum posuere ante tincidunt. Aliquam erat volutpat. Quisque erat turpis, faucibus at eros non, ornare fringilla lorem. Sed mollis cursus lectus sit amet consequat. Duis in sodales leo.</p>
</div>
答案 0 :(得分：0)
要做到这一点，你必须改变以下几点。查看演示 - Fiddle。
$('.curtain-action').click( curtain ); 将您的curtain功能代码替换为：
$('#curtain').animate( {top: '-'+$('#curtain').height() }, 1000 )
将curtain div css更改为：
#curtain {
z-index: 1;
position: absolute;
width: 100%;
}