.js

if($(".index").scrollTop() + $('.index').height() > $('.index').height() + $('.index').height()  - 100) {
     alert("near bottom!");
}
----
if($('.index').height() > $(document).height() - 100) {
     alert("near bottom!");
}
----
var docHeight = $(document).height(),
scrollTop = $(document).scrollTop(),
windowHeight = $(window).height();

if (docHeight - (scrollTop + windowHeight) <= 100) {
    alert(docHeight - (scrollTop + windowHeight));
}
----
var scrollPos = $('#viewable-div').height() - $('#scrolling-content').height();
  if ($("#scrolling-content").scrollTop() > (scrollPos - 100)) {
    alert("here")
}
----
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
    alert("hello")
 }
----

Maybe relevant:

CSS included
@media only screen and (min-device-width: 481px) {
  body {
    -moz-transform: scale(0.75, 0.75); /* Moz-browsers */
    zoom: 0.75; /* Other non-webkit browsers */
    zoom: 75%; /* Webkit browsers */
  }
}

This is a rails app and I also have this in my application.html.erb file
<script>
  (function(){
    $(window).scroll(function() {

      if($(this).scrollTop() > 50) { 
          $('.navbar').addClass('opaque')

      } else {
          $('.navbar').removeClass('opaque');
      }

      if($(this).scrollTop() > 285) { 
          $('.nav_submit').removeClass('hide_nav_submit');

      } else {
          $('.nav_submit').addClass('hide_nav_submit');
      }
  });


})();
</script>