2

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:

$(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!

Community
  • 1
  • 1
ohmmho
  • 132
  • 2
  • 13
  • If your basic script isn't working, I'd imagine you either have a conflict elsewhere on the page, or you're trying to run the script before jQuery has been loaded? Try wrapping it in `$(document).ready(function() {});` – David Wilkinson May 06 '16 at 11:46
  • Your code looks ok. Is jquery included? Is your code there (maybe the browser serves the page from cache)? Do you have any other error on page? Have you tried opening a console (f12) and paste the second script there - $(window).scroll(function() { console.log('scrolling'); }); (works ok)? My money is on chache, or other error previous to this part of script. – zozo May 06 '16 at 11:47
  • I tryed your code... Works perfectly. Problem is elsewhere, like no jQuery loaded or no element with id="target". – Louys Patrice Bessette May 06 '16 at 11:49
  • Hey, thank you. The console doesn't show more errors and I'm doing other things with jQuery on the same doc -that has `$(document).ready(function() {}); ` that do work fine. I don't think it's cache, as I'm developing on local and with cache disabled on the browser. I tried @zozo idea, to paste second script on console and it returns a window object but doesn't log anything on the console. I don't know what's going on! I don't know much about wordpress, could be something on that? Thanks! – ohmmho May 06 '16 at 12:02
  • You could have another event bound before this one that somehow blocks the rest... I'm getting out of ideas :). If the script doesn't work on console something is strange (you can just press f2 here on stack overflow and run it, you will see it woks). Maybe some kind of conflict (some libs overwrite jquery $ and break things for example). As @Paul Crozer suggested. About the cache that is easy to check even if it is minified, just alert something in your script and see if appears. If cache is not the problem you will see the alert. – zozo May 06 '16 at 12:16
  • @zozo Cache it doesn't seem to be the problem. I can throw alerts. – ohmmho May 06 '16 at 14:23
  • Is the project online? I'm really curious what's happening there :). If yes post a link pls. – zozo May 06 '16 at 14:32
  • @zozo sorry dude, the site version I'm working on is not on production yet. I still don't know what's going on here hehe may deploy to production without the scrolling effects feature. – ohmmho May 07 '16 at 11:34

3 Answers3

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);
Paul Crozer
  • 68
  • 1
  • 10
  • This may not solve the problem, but may be a valid reason +1. Also welcome to SO. – zozo May 06 '16 at 12:18
  • @zozo Yes! this makes sense, but how can i check this? All other jQuery functions I'm running work perfectly! – ohmmho May 06 '16 at 12:24
  • Try the answer above :). Also http://stackoverflow.com/questions/1853223/check-if-object-is-a-jquery-object. – zozo May 06 '16 at 12:32
  • Tried paul's answer and nothing. However, I'm not sure how do I have to use `instance of jQuery`. Do I check if window is a jQuery object? Thanks Paul and @zozo! – ohmmho May 06 '16 at 14:22
  • @zozo Well, I checked if window is jQuery with this method and it is jQuery. Not sure what does this means heh – ohmmho May 06 '16 at 14:28
0

Have you tried this?

<script>
window.onscroll = function() {scrolling()};

function scrolling() {
console.log("Scrolling");
}
</script>
Felix
  • 65
  • 1
  • 7
0

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');    
       }
});
kbnawale
  • 11
  • 3