滑动窗帘按钮操作

Slide curtain button action

本文关键字:按钮 操作      更新时间:2023-09-26

提前感谢您的帮助。

想到了这个窗帘动画代码,我做了一些更改,其中之一是有一个按钮来滑动窗帘,并显示后面的内容。

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

为此,您必须更改以下几点。检查演示 - 小提琴。

  1. 向按钮添加点击处理程序:$('.curtain-action').click( curtain );
  2. curtain函数代码替换为:

    $('#curtain').animate( {top: '-'+$('#curtain').height() }, 1000 )
    
  3. curtaindiv css 更改为:

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