Search code examples
javascriptjqueryjquery-waypoints

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


Solution

  • 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.