While trying to add a jQuery trigger on scroll script to my child theme, I noticed it never triggered even though it was added. However after trying to figure out why the script wasn't working I used document.body.scrollTop to find it always returned a value of 0 despite having a larger scroll height.

I tried the same thing on the unmodified parent theme and found it also always returned me a 0. So I'm assuming there is some style or script that is hijacking it. I've tried to hunt it down but no luck as of yet.

Is there anyway I can reset the scrolltop property via css / javascript or trigger my script on a different scroll trigger?


I guess

body.scrollTop is deprecated in strict mode. Please use documentElement.scrollTop if in strict mode and body.scrollTop only if in quirks mode.

So I would suggest you to use document.documentElement.scrollTop. also let us know when are you using this statement? show us full code and your console error if possible

Please try the below code edited with respect to your comment code and let us know what you see in console.

jQuery(document).ready(function ($) {
 var ScrollTop = jQuery(window).scrollTop();
 if (ScrollTop > 100) { 
  jQuery( ".site-header" ).addClass( "scroll" ); 
   console.log("above 100");
 jQuery( ".site-header" ).removeClass( "scroll" ); 
   console.log("below or equal to 100");
  • script I'm trying to run jQuery(document).ready(function ($) { $(window).scroll(function(){ var ScrollTop = parseInt($(window).scrollTop()); if (ScrollTop > 100) { $( ".site-header" ).addClass( "scroll" ); }else{ $( ".site-header" ).removeClass( "scroll" ); } }); }); – Meir Snyder Dec 16 '15 at 13:12
  • not seeing any errors in my console besides the a google font error. I'm still able to scroll, just can't seem to get the scrolltop value to change. – Meir Snyder Dec 16 '15 at 13:19
  • check the updated answer with respect to your comment code – WPTC-Troop Dec 16 '15 at 14:21
  • I tried the script still no luck though :(. finally got in touch with the developer of the theme and he said "Due to specific layout, body is not scrolled. To hook into the scrolling, try using something like this: $(document).on('sleek:scroll', function(){ // here goes your function }); Eventually i found a value that returns an increasing number on scroll using $("div.loop-container").offset().top – Meir Snyder Dec 16 '15 at 15:57
  • My revised script, that still isn't firing jQuery(document).ready(function ($) { $(document).on('sleek:scroll', function(){ var ScrollTopPosition = parseInt($("div.loop-container").offset().top); if (ScrollTopPosition > 100) { alert("You've scrolled 100 pixels."); } }); }); – Meir Snyder Dec 16 '15 at 16:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.