jquery waypoints 和 .scroll() 冲突

Question

这是我的 JS 代码：

$(window).scroll(function (event) {
    var scrollTop = $(window).scrollTop();
    var height = $(window).height();
    var opacity = ((height - scrollTop) / height);
    var scale = ((height - (scrollTop/10)) / height);
    console.log(opacity);
    if(opacity>=0.05){
        $.each(links, function( i, link ) {
            $(link).css({
                'opacity': opacity,
             });
        })} else {
            $(link).css({
                'opacity': 0.05
            });
        }
    if(scale>=0.9){
         $('#index').css({
            'transform': 'scale('+scale+')'
         });
    } else {
        $('#index').css({
            'transform': 'scale(0.9)'
        });
    }
});
$( document ).ready(function() {
    $('#aboutContent').waypoint(function(direction) {
        alert('hit!'); 
    });
});

.scroll() 函数完全符合我的要求，但航路点根本不起作用。但是，如果我删除了 .scroll() 函数，则航路点将正常工作。任何人都可以发现可能导致问题的原因吗？我找不到 .scroll() 和 waypoints 之间的任何已知冲突。这是一个 JSFiddle：https://jsfiddle.net/zocdvefx/ 如果你删除 .scroll() 函数，路点应该可以工作。

谢谢！杰米

Answer 1

在你的 fiddle 中，问题出在这个 if-else 块中：

if (opacity >= 0.05) {
  $.each(links, function(i, link) {
    $(link).css({
      'opacity': opacity,
    });    
  })
} else {
  $(link).css({ // <-- link is no longer in scope and is undefined 
    'opacity': 0.05
  });
}

将我在上面突出显示的行中的 link 更改为 links 将解决您的问题。

为了将来参考，当您运行遇到问题时，请始终检查浏览器的开发人员控制台（通常是 F12）。我在您的 jsfiddle 中打开它后，它立即开始告诉我问题出在哪里：ReferenceError: link is not defined.

jquery waypoints 和 .scroll() 冲突

jquery waypoints and .scroll() conflict

javascript

jquery

jquery-waypoints