无法获得滚动动画以与jquery一起使用

Question

我正忙于开发一个新网站。 现在，我的问题是在用户向下滚动时添加淡入淡出的动画。

我为此尝试了各种jquery脚本和方法。 甚至尝试了一个简单的脚本来向下滚动时添加一个类。 滚动方法无效。

jQuery本身的作品。 我在移动设备上添加了一个简单的按钮，效果很好。

有人可以帮我吗，我目前看不到问题。 您可以在以下位置查看该网站。

http://www.royaldutchtreeservices.ca/

谢谢！

Answer 1

我建议将jQuery Waypoints插件与CSS3动画结合使用。 当用户滚动到Waypoints插件时，Waypoints插件将向该元素添加一个类（您可以自定义像素或百分比偏移量），并且CSS将为状态之间的过渡（例如不透明度和相对位置）设置动画。

这是一个简单的Codepen演示 。

确保链接到Waypoints插件。 然后您的代码将如下所示。

HTML

<div class="waypoint group">
    <p>Group 1</p>

</div>

<div class="waypoint group">
    <p>Group 2</p>

</div>

<div class="waypoint group">
  <p>Group 3</p>
</div>

<div class="waypoint group">
  <p>Group 4</p>
</div>

CSS

.group {
  background:#eaeaea;
  margin-bottom:20px;
  padding:50px;
  min-height:600px;
  font:bold 12px/2 arial;
  color:#fff;
  background-color:#0196ff;
}

.group:nth-of-type(2) {background-color:#16d44b;}
.group:nth-of-type(3) {background-color:#d45016;}
.group:nth-of-type(4) {background-color:#d41666 ;}

.waypoint {
  opacity:0;
  top:50px;
  position:relative;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition:all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out; 
}

.waypoint.active {
  opacity:1;
  top:0;
}

JS

$('.waypoint').waypoint(function(direction) {
    if (direction == 'down') {
        $(this).addClass('active');
    }
},    {

    offset: function() {
        return 400 // trip waypoint when element is this many px from top 
    }
});

Answer 2

为什么不尝试iscroll。并添加滚动侦听器。

您甚至必须在初始化iscroll之前就获取要淡入淡出的每个元素的位置...，并使用onScroll侦听器初始化iscroll。.为此，您必须包括scroll-probe.js。 onScroll侦听器可以确定您需要在哪个滚动点上应用动画。例如

If( this.y == myelementsYpostion) {
  $('#myelement').fadeIn()
}