尝试使用 Waypoints 让 div 在滚动条上显示

Question

我正在使用名为 waypoints 的 jquery 库，并且我试图让预订框在用户向下滚动一点时出现。 div 与第二部分位于同一行，appears.The 不透明度应该为 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

如果您只想在用户开始滚动时立即显示框，则不需要 waypoints。 Waypoints 当您想要某些东西时使用，所以当您到达网站上的某个点时显示（通常用于动画）。

这是一个简单的示例，说明您将如何操作。如果您希望它在一段时间后消失，只需修改 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 在滚动条上显示

Trying to get div to reveal on scroll using Waypoints

wordpress

jquery

jquery-waypoints