jquery issues with html height:100%

0
votes

I have this function that fires a click when the user is 500px from the bottom of the window.

It all works fine, except when I set my html and body to height:100% in the css.

Here's the 'working' script.

$(document).ready(function() {
    var timeout = '';
    $(window).scroll(function (e) { 
        var intBottomMargin = 500; 
        clearTimeout(timeout);
        //if less than intBottomMargin px from bottom 
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - intBottomMargin) {
          timeout = setTimeout(function(){ 
                $("#next-paginav")[0].click(); 
          }, 300);
        }
    });
});

How do I make the same script work when my html and body are 100% height?

I'm sure it's really simple to do.

2
jquerycss
haven't explained what isn't working...create a demo in jsfiddle.net. Also...if body height is 100% need to monitor scroll on something other than window - charlietfl
@charlietfl Here is a jsfiddle for you, good sir! jsfiddle.net/LnmsR remove height:100% from html and see it work just fine. - andy

2 Answers

0
votes

I think your calculation is incorrect: 

if ($(window).scrollTop() >= $(document).height() - $(window).height() - intBottomMargin)

If your body/html is 100% height, it means that you're setting it to be the height of the viewport. Did you have floated elements before? That may be why your (previous) height calculation was working

Try this instead:

if ($(window).scrollTop() >= $(document).height() - intBottomMargin)
-1
votes

What you are scrolling is not the window since body and html are set to same size as window, so window has no overflow to need a scollbar for

Scrollbar is part of body since it has overflow content. Bind scoll handler to body and it works

 var $scollEl=$('body').scroll(function (e) { 
        var intBottomMargin = 500; 
        clearTimeout(timeout);
        //if less than intBottomMargin px from bottom 

        if ($scollEl.scrollTop() >= $(document).height() - $scollEl.height() - intBottomMargin) {
          timeout = setTimeout(function(){ 
                $(".clicked").click(); 
          }, 300);
        }
    });
});

Demo:http://jsfiddle.net/LnmsR/2/