Question

我试图找出如何触发航点功能。现在，当我的info div位于屏幕的最顶端时，此功能启动。理想情况下，我希望在用户的屏幕底部到达info-box部分时启动此功能。我不确定在事件触发时我甚至可以修改。

另外，由于某些原因，信息框不会像我正在尝试的那样向右转换。它们刚刚过渡到现在水平移动的淡入淡出。我正在尝试的是什么问题？

var $info_show = $('#info');

$info_show.waypoint(function () {
  $('.info-box').addClass("fadeShow");
});

#info {
  max-width: 100%;
  height: auto;
  padding: 300px 20%;
}
.info-box {
  border: 1px solid black;
  padding: 50px;
  background: #00f;
  color: #fff;
  display: inline;
  margin: 0 100px;
  transition: 1s;
  opacity: 0;
}
.info-box.fadeShow {
  opacity: 1;
  transform: translateX(150px);
}

<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="info">
  <div class="info-box">Red</div>
  <div class="info-box">Blue</div>
  <div class="info-box">Green</div>
</div>

如何设置航点何时触发

0 个答案: