0

This must be some silly error but in my javascript function, the if statment that should be executing when i reach bottom of screen, is executing when i reach top of my screen ... Here is my code :

$(window).scroll(function() {       //detect page scroll        
    if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
         {
         $('.animation_image').show(); //show loading image
         }
});

.animation_image is a loading image that should appear when i reach bottom of screen but is appearing when i scroll down and then back up to the top of the screen ...

If someone can explain what i am doing wrong, that would be great !

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
Jackymamouth
  • 159
  • 2
  • 11
  • 1
    Seems to be working fine. http://codepen.io/anon/pen/wKYqzz – Shikkediel Nov 08 '15 at 00:33
  • it seems to be working fine for me as well. What is the value of $(document).height? – Bigalow Nov 08 '15 at 00:37
  • $(document).height value is 800 – Jackymamouth Nov 08 '15 at 00:53
  • Can it be that your browser also has an height of around 800px?A wild guess here but can it be that your body has the css property height:100%. If so the height of your body will have the height of your viewport, which is less than that of its contents. If this css property exists on your body, removing it might fix it. – Bigalow Nov 08 '15 at 01:12

3 Answers3

0

Well it should work properly. Though just out of curiosity, this code never hides the image. Shouldn't it have else where you give it a hide? There you go, a Fiddle https://jsfiddle.net/3eg18L8u/

$(window).scroll(function() {       //detect page scroll        
if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
     {
     $('.animation_image').show(); //show loading image
     }
else {
     $('.animation_image').hide(); //show loading image
}

});

Shiroo
  • 666
  • 4
  • 11
  • i have this element in html : `` The image is hidding by default – Jackymamouth Nov 08 '15 at 00:43
  • 1
    I'm almost sure that it should work properly. You do not have any odd message in console or anything? cause your way of doing the thing (checking for bottom) is rather well-known and widely used nowadays and it should simply work. Also what browser is that? I would say that it might be the reason. There is also a nice respond from Miles O'Keefe about "for all browsers" solution that might be right for you (if it is really about browser). http://stackoverflow.com/a/10795797/5538090 – Shiroo Nov 08 '15 at 01:13
  • Tried unfortunatly didn't work :/ went for alternative way, just posted it – Jackymamouth Nov 08 '15 at 01:51
0

Have you tried >= instead of ==?

if ($(window).scrollTop() + $(window).height() >= $(document).height())     
{
     $('.animation_image').show(); //show loading image
}

How about:

$(document).ready(function(){
    $(window).scroll(function(e){
        e.stopPropagation();
        e.preventDefault();
        var scrollBottom = $(document).height() - $(window).scrollTop() - $(window).height();
        if (scrollBottom == 0) {
            $('.animation-image').show();
        }
    });
});
Nitin
  • 898
  • 1
  • 9
  • 25
  • Doesn't solve problem :/ just makes image appear straight away without having to scroll down then back up – Jackymamouth Nov 08 '15 at 00:41
  • 1
    Try adding another part to the if function that is triggered when scrolling down. E.g. if (currentPositionY > previousPositionY && scrollBottom == 0) ... bit of a hack though... – Nitin Nov 08 '15 at 01:14
  • Or try $(document).on('scroll', 'body', function(){ ... }); / $('body').scroll(function(){...}); – Nitin Nov 08 '15 at 01:24
0

I can't seem to understand why it isn't working even with all the help from you guys, so i gave up and decided to go with this code wich isn't the solution, but more an alternative : 

function yHandler(){
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset; 
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
    $('.animation_image').show();
 }
    var status = document.getElementById('status');
    status.innerHTML = contentHeight+" | "+y;
}window.onscroll = yHandler

With html content structure like follows: 

<body>    
<div id="status">0 | 0</div>
<div id="wrap">
*ALL CONTENT*
</div>
</body>

and CSS:

div#status{position:fixed; font-size:24px;}
Jackymamouth
  • 159
  • 2
  • 11