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:
$(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!
Have you got your code in a closure? Perhaps some other JavaScript is conflicting with jQuery and using the $ symbol.
eg 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);
你试过这个吗？
<script>
window.onscroll = function() {scrolling()};
function scrolling() {
console.log("Scrolling");
}
</script>
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');
}
});