$(window).scrollTop(); why not can access from outside?

JavaScript
1

I have a very basic:
var current = $(window).scrollTop();

Try to access it inside a

function scroll()
{
 if (current >= offsetfornav)
}

But this way not wannt work only if paste into scroll() function why? Some other vars not have problem thats outside?

Thanks

2

Is current being defined in a global context? current is only available to the scroll function if it is defined within the scroll(), or within its parent context. Or, ultimately, in the global namespace like so:

window.current = $(window).scrollTop();

Doing that forces the variable current to be defined globally.

3

var will always be attached to window object, which is why it should be avoided.

Have you used console.log in the function to see if you get the value you intend? Im not that fluent with jQuery, since it was popular before I started with web dev and now isnt used that much.

To help you I would need more code, maybe your codepen and your expectations.

4

Nah, any var define within a function block only applies within that function block. var created OUTSIDE of any function are global, yes, but by using var, you have function scope.

Great article on this subject: https://www.digitalocean.com/community/tutorials/understanding-variables-scope-hoisting-in-javascript

5

Correct. Mixed it up with global let/const not attaching to window object, where’s var in global does.

However, globals should still try and be avoided. But now we are going a bit off-topic :sweat_smile:

If its declared as TS stated the function should have access to the variable.

6

Again, it totally depends on where that current variable has been defined.If it is within another function elsewhere, then .scroll() will never see it.

7

http://jsfiddle.net/bd7us1xz/

Is detect the bottom of the page. But outside somehow the test1 var is not detect and others too try many ways.

8

well, you can’t have the space in the variable name test 2 as you do in your if…

9

But according to the TS it seems like it is declared outside the function, directly in the global scope. Which is why I asked for a full code example.

1 Like
10

http://jsfiddle.net/bd7us1xz/1/

Typo but also not work…

11

http://jsfiddle.net/bd7us1xz/1/

This one is full code display alert when bottom of page.

12

Try this, so you can see what values you’re actually running:

var test1 = $(window).scrollTop(),
    test2 = $(window).height(),
    test3 = $(document).height();


$(window).scroll(function() {
console.log(test1, test2, test3);
  if (test1 + test2 > test3 - test2) {
    alert("bottom!");
  }
});

And, of course, open the console. It’s doing exactly what you ask. But none of the variables change on scroll, as you’ve defined them OUTSIDE THE LOOP. Instead, do something like:

var test1,
    // these two can be set outside the loop, as they shouldn't change on scroll. Only on resize.
    test2 = $(window).height();
    test3 = $(document).height();

$(window).scroll(function() {
  test1 = $(window).scrollTop();
  
  console.log(test1, test2, test3);
  if (test1 + test2 > test3 - test2) {
    alert("bottom!");
  }
});
1 Like
14

You are a genius! :slight_smile:

15

Lol it’s a common gotcha. Using console.log is a handy way of providing yourself with debug messages, and seeing what’s going wrong is the first step to fixing the problem. :wink:

1 Like