scrollTop not working for me

JavaScript
1

Is this syntax correct:

$(window).scrollTop()

I am trying to alter the positioning of a lightbox with some JS (so that it doesn’t go off the screen) but this doesn’t seem to be recognised. Should I be using something different to find how far down the window has been scrolled?

_thanks

2

Well, $(window) is jQuery syntax (or some other JS library). jQuery has no such thing as scrollTop, but the Element DOM interface does (the window doesn’t). So instead you can use window.scrollY to see how far down the page has been scrolled. For a particular element (like the body) you would use [URL=“https://developer.mozilla.org/en/DOM/Element.scrollTop”]Element.scrollTop.

3

This is good information - thanks. Yes it is JQuery but I’m still playing around with it - I’ve noticed that the last brackets are causing the function not to work:

$(window).scrollTop[B]()[/B]

… but it still doesn’t register it like this and window.scrollY didn’t either and nor did $(document).scrollTop … and $(body).scrollTop stopped the function working.

…I’m not sure the right combo - can you provide anything else that might do it?

_thanks

4

jQuery and pure JavaScript are not interchangeable. Using window.scrollY should work. For example, try doing this:

alert(window.scrollY);

Why don’t you post a bit more code, then we can help you in the context of what you’re trying to do.

5

thanks again…

Why don’t you post a bit more code, then we can help you in the context of what you’re trying to do.

…well I’m trying to ensure that a JQuery lightbox keeps on the page. The original function was:

	$("a.preview").mousemove(function(e){

			$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")

	});

… but then I put a condition in there to get the desired effect:

	$("a.preview").mousemove(function(e){

			if (e.pageY + $("#preview").height() - 20 >= $(window).height() ) {

			posY = $(window).height() - $("#preview").height() - 20;
			
			} else {			

			posY = e.pageY - xOffset;

			}

			$("#preview")
			.css("top",(posY) + "px")
			.css("left",(e.pageX + yOffset) + "px")

	});

This however didn’t allow for when users scroll down so I need to include it in the calculation. I hope this makes it clearer…

_thanks

6

This was resolved by downloading and using a newer version of JQuery - I believe some earlier versions don’t allow for this.

I am also trying to keep the lightbox on screen without going off to the right so I attempted to include another condition in the JS (as well as the one mentioned) but it couldn’t work so I’m thinking that my syntax was incorrect.

What is the right way to do this??

_thanks

7

Can anyone help me to understand if there are different methods for different browsers when conditioning in a Jquery function?? I can’t find info about this…

_thanks

8

I don’t think so, the whole point of jQuery is that it offers a layer of abstraction where you needn’t worry about cross-browser compatibility.

Is this about your previous post? What do you mean by “going off to the right”? And what condition did you add? Some code would help.