JavaScript/jQuery not triggering scroll event

I’m trying to trigger the scroll event through jQuery and JavaScript for a wordpress site that I’m developing.

$(window).scroll(function() {
   var hT = $('#target').offset().top;
       hH = $('#target').outerHeight();
       wH = $(window).height();
       wS = $(this).scrollTop();
   console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
       console.log('working');
   }
});

And nothing happens on the console. The following code doesn’t work:

Read More
$(window).scroll(function() {
    console.log('scrolling');
});

Neither do this:

function scrollFunction() {
    console.log('scrolling');
}

window.onscroll = scrollFunction;

I’ve tested these lines on other non wordpress projects, even in codepen and they work. What I’m missing?

I’m using jQuery 12.2.2. Also, in the same project and for the same purpose, I couldn’t make work Waypoints.js, as I posted in this other question.

Any help is really appreciated, thanks!

Related posts

3 comments

  1. Have you got your code in a closure? Perhaps some other JavaScript is conflicting with jQuery and using the $ symbol.

    e.g. wrap it like this to make sure $ is jQuery:

    (function($){
    
      $(window).scroll(function() {
         var hT = $('#target').offset().top;
             hH = $('#target').outerHeight();
             wH = $(window).height();
             wS = $(this).scrollTop();
         console.log((hT-wH) , wS);
         if (wS > (hT+hH-wH)){
             console.log('working');
         }
      });
    
    })(jQuery);
    
  2. Have you tried this?

    <script>
    window.onscroll = function() {scrolling()};
    
    function scrolling() {
    console.log("Scrolling");
    }
    </script>
    
  3. Try below code… 🙂

    Replaced $(window).scroll(function(){}); to $(window).on('scroll', function(){})

     $(window).on('scroll', function(){
    
       var hT = $('#target').offset().top;
           hH = $('#target').outerHeight();
           wH = $(window).height();
           wS = $(this).scrollTop();
        console.log((hT-wH) , wS);
           if (wS > (hT+hH-wH)){
             console.log('working');    
           }
    });
    

Comments are closed.