Question

我正在使用名为waypoints的jquery库，我试图在用户向下滚动一下时出现一个预订框。 div与出现的第二部分位于同一行。不透明度应为0并在滚动时转到1。该网站可以在http://dev.hotelfusionsf.com及其Wordpress网站上找到。非常感谢任何见解。

js：

var $bookBox = $('.waypoint');

$bookBox.waypoint(function (direction) {
  if (direction == 'down') {
    $bookBox.addClass('show-time');
  } else {
 $bookBox.removeClass('show-time');
  }
}, {offset: '2%'});

css：

.waypoint {
    opacity: 0;
    width: 100px
 }
.show-time { 
    opacity: 1 ;
    z-index: 9999;
}

Answer 1

如果您只是想在用户开始滚动时立即显示该框，则不需要路标。当您想要在您的网站上达到特定点时显示某些内容（通常用于动画）时，会使用航点。

这是一个如何做的简单示例。如果您希望它在一段时间后消失，只需修改if条件。重点在于添加类。

$(document).on('scroll', function() {
  var scroll_top = $(this).scrollTop();
  if (scroll_top > 50) {
    $('.content_box').addClass('show');
  }
});

.container {
  height: 2500px;
  display: block;
  background: #ddd;
  overflow: hidden;
}
.content_box {
  height: 100px;
  width: 300px;
  color: #fff;
  background: blue;
  margin: 200px;
  padding: 30px;
  display: block;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}
.show {
  opacity: 1;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="content_box">Look at me!</div>
</div>

尝试使用Waypoints在div上显示div

1 个答案: