javascript - Using .scrollTop animation with mobile device not working -

i have footer appears when user scrolls down on bottom of page, seem reason doesn't appear working on mobile devices, particularly ipad, , seems finicky on there. works doesn't , when using ipad vertically.

<script type="text/javascript"> var $window = jquery(window); var   $document = jquery(document); var  footer = jquery('.footer');  footer.css({opacity: 0});  $window.on('scroll', function() {   if (($window.scrolltop() + $window.innerheight()) == $document.height()) {     footer.stop(true).animate({opacity: 1}, 250);   }    else {     footer.stop(true).animate({opacity: 0}, 250);   } }); </script> 

just fades in , out on bottom of page condition. looked around , there seems several ways go doing , wanting know effective solution.

i thought had found jfiddle solution while ago can't seem find question anymore , required me dig quite bit.

i'm not sure of factors go mobile not being compatible solution have, it's hard me determine needs adjusting. thanks.

actually figured out issue needs exact document height if i'm using '==', in mobile devices viewpoint doesn't trigger script while moving or scrolling had t change '==' '>=' in condition , add height viewport.

if (($window.scrolltop() + $window.innerheight()) >= $document.height()) 

and in header viewport tag

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> 

and works perfectly!