幻灯片窗帘按钮动作

Question

预先感谢您的帮助。

我来了解这个窗帘动画代码，我做了一些改动，其中一个是有一个按钮来滑动窗帘，并显示背后的内容。

我尝试添加方法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>

Answer 1

要做到这一点，你必须改变一些事情如下检查演示 - Fiddle

1. 添加一个单击处理程序，以您的按钮：。$('.curtain-action').click(curtain);

2. 将您的curtain功能代码替换为：

   $('#curtain').animate({top: '-'+$('#curtain').height() }, 1000) 
   

3. 您curtain DIV + CSS更改为：

   #curtain { 
       z-index: 1; 
       position: absolute; 
       width: 100%; 
   }