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（）和航点之间的任何已知冲突。这是一个JSFiddle：https://jsfiddle.net/zocdvefx/如果删除.scroll（）函数，则路径点应该有效。

谢谢！杰米

Answer 1

问题出在这个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（）冲突

1 个答案: