Trying to get div to reveal on scroll using Waypoints

Question

Im using the jquery library called waypoints and Im trying to get a booking box to appear when a user has scrolled down a little. The div is on the same line as the second section that appears.The opacity is supposed to be 0 and go to 1 on scroll. The site can be found at http://dev.hotelfusionsf.com and its a Wordpress site. Would appreciate any insight.

The js :

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

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

The css :

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

Answer 1

If you just want to show the box immediately when the user starts scrolling you don't need waypoints for that. Waypoints are used when you want something so show when you reach certain point on your website (for an animation usually).

This is a simple example of how you'd do it. If you wish it to disappear after a while, just modify the if conditional. The point is in adding the classes.

$(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>