Jamie Hunter Jamie Hunter - 4 months ago 36
jQuery Question

jquery waypoints and .scroll() conflict

Here's my JS code:

$(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!');
});
});


The .scroll() function works exactly as I want it but the waypoint doesn't at all. If however, I remove the .scroll() function the waypoint works as it should. Can anyone spot what could be causing the issue? I can't find any know conflicts between .scroll() and waypoints. Here's a JSFiddle: https://jsfiddle.net/zocdvefx/ If you remove the .scroll() function the waypoint should work.

Thanks!
Jamie

Answer

In your fiddle the issue is in this if-else block:

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
  });
}

Changing link to links in the line I highlighted above will resolve your issue.

For future reference always check your browser's developer console (usually F12) when you're running into an issue. As soon as I opened it in your jsfiddle it immediately started telling me what the issue was: ReferenceError: link is not defined.