幻燈片窗簾按鈕動作

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%; 
   }