为什么 jQuery 航点不起作用？答案

【问题标题】：Why is jQuery waypoints not working?为什么 jQuery 航点不起作用？
【发布时间】：2015-04-17 00:52:53
【问题描述】：

我有这个：

<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.waypoints.js"></script>

这个：

.icon {
  text-decoration: none;
  border-bottom: none;
  position: relative; /*puede ser acá */
  opacity: 0.5;
}

这件事：

.icon-animate {
    opacity: 1;
}

最后是这个：

var $first = $('.icon');

$first.waypoint(function (){
    $first.addClass('icon-animate');
});

文件被正确命名并且它们属于正确的文件夹。为什么它不起作用？

【问题讨论】：

标签： javascript jquery jquery-waypoints

【解决方案1】：

使用航点编写函数的正确方法如下：

$first.waypoint(function(direction) {
    $first.addClass('icon-animate');
});

然后您可以指定选项：

// hit the top of your element when scrolling up
$first.waypoint(function(direction) {
    if (direction == 'up') { // hit the top of your element when scrolling up
        $first.addClass('icon-animate');
    }
});

// hit the top of your element when scrolling down
$first.waypoint(function(direction) {
    if (direction == 'down') { // hit the top of your element when scrolling down
        $first.addClass('icon-animate');
    }
});

// hit the bottom of your element when scrolling up
$first.waypoint(function(direction) {
    if (direction == 'up') { 
        $first.addClass('icon-animate');
    }
}, { offset: function() { return ((-$(this).height() + $("body").height())) } });

// hit the bottom of your element when scrolling down
$first.waypoint(function(direction) {
    if (direction == 'down') { 
        $first.addClass('icon-animate');
    }
}, { offset: function() { return ((-$(this).height() + $("body").height())) } });

【讨论】：

我添加了一个 $(document).ready 函数并删除了偏移约束并且它正在工作

【解决方案2】：

请删除航点 js 文件之一。它不能同时包含两者。

<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.waypoints.js"></script>

【讨论】：

你刚刚让我意识到第二个应该命名为 waypoints.js（没有 jquery. 部分）。它仍然无法正常工作，但感谢您让我注意到我的许多错误之一。