jQuery的航點和.scroll（）衝突

這裏是我的JS代碼：jQuery的航點和.scroll（）衝突

$(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（）函數，航點應該工作。

謝謝！傑米

來源

2016-08-02 Jamie Hunter

這是很難通過看你的代碼來解決此類問題。請將您的相關代碼移到jsfiddle或其他我們可以重現/看到問題的環境中。 – bwegs

認爲可能是這種情況。這裏是一個jsfiddle： https://jsfiddle.net/zocdvefx/ 如果你刪除了$（window）.scroll（）函數，航點就起作用。 –

在你擺弄的問題在這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。

來源

2016-08-02 19:17:33 bwegs

非常感謝你！獲得的教訓（設計師試圖在這裏發展！） –

jQuery的航點和.scroll（）衝突

回答

相關問題