Adding jQuery .scrollTop to if statement

Question

Does anyone know how add to this script?

I need to check whether the visitor is at the top of the page? If not call the fallback script.

E.g. if user is at top of page delay animation, if user is elsewhere remove delay (fallback else condition).

var viewportWidth = $(window).width(),
    stopTabletAnimation = 1024,
    scrTop;

$(window).on("load scroll", function() {
    scrTop = $("html, body").scrollTop();
    if (!scrTop && viewportWidth > stopTabletAnimation){
        // DELAY ANIMATION - FORCE TOP CORRECTLY (WITH A DELAY - .9s)
        $('.website-navigation').delay(3500).animate({top:0}, 900, function() {
            // Confirm Above if successful!
            console.log('ANIMATION COMPLETE: .site-head Delayed, then loaded!');
        });

    } else {
        // Do Not Animate
        $('.website-navigation').css({top: '0'});
        console.log('NO ANIMATION: Inforce Set Height');
    }
});

And... where have you used the scroll event? And what have you tried to get the scrollTop value? — Roko C. Buljan, Jan 12 '14 at 17:57
I wanted to jQuery scrollTop, however combining it into the if condition above proved useless. — Neil, Jan 12 '14 at 18:22

Roko C. Buljan · Answer 1 · 2014-01-12T18:23:17.460

1

var scrTop;

$(window).on("load scroll", function() {
  scrTop = $("html, body").scrollTop();
  if(!scrTop){ //if scrollTop is at 0

  }else{

  }
});

or in your case probably something like:

if (!scrTop && viewportWidth > stopTabletAnimation){

edited Jan 12 '14 at 18:23

answered Jan 12 '14 at 18:02

Roko C. Buljan

196,159
39
305
313

Just about to add my comment, 6 seconds to slow :) Let me update the code. And see what happens! – Neil Jan 12 '14 at 18:24
May I ask on your latest update what the difference between && and || is? – Neil Jan 12 '14 at 18:30
1

@Neil `&&` means that both `condition` **AND** `condition` must be truthy, while `||` means that just one `condition` **OR** `condition` need to be truthy to validate – Roko C. Buljan Jan 12 '14 at 18:33
I have made the amends, but to no avail. It seems to be trapped in the loop as it does not return the else statement. If I scroll down the page and reloaded the page I still get the incorrect console message and coded delay. Cache has been emptied. – Neil Jan 12 '14 at 18:49
Thanks for get the grunt of scrTop variable. Much appreciated! – Neil Jan 13 '14 at 12:15

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

Change the check from

scrTop = $("html, body").scrollTop();

To

scrTop = $("body").scrollTop();

This will detect how far away from the top the user is.

Edit: This should be set with

scrTop = $(window).scrollTop();

Ass explained here: https://stackoverflow.com/a/2422159/1809751

edited May 23 '17 at 12:21

Community

1
1

answered Jan 12 '14 at 22:56

Tom Burgess

286
2
7

Thanks for the add, its always in the finer detail! – Neil Jan 12 '14 at 22:58
@NeilLittle I might be missing something... but what's wrong with `$("html, body").scrollTop();` ? – Roko C. Buljan Jan 13 '14 at 12:31
1

$("html, body").scrollTop(); always returns 0 in Chrome. It may even be better to get value with $(window).scrollTop(); – Tom Burgess Jan 13 '14 at 16:01
Made the additional edit. @Tom Burgess was right code seems smoother. – Neil Jan 14 '14 at 11:03

Adding jQuery .scrollTop to if statement

2 Answers2