3

Is there a way to tell if you have scrolled passed the center of the web page or in other words, when you have scrolled passed exactly half of the web page and your scrollbar is situated in the lower half of the browser window?

I want to be able to trigger this: $('.pineapple-man').show(); when I have scrolled down passed half of the page?

Is this possible at all?

Your help would be so kind!

steve
  • 53
  • 1
  • 1
  • 3
  • 1
    possible duplicate of [jQuery trigger action when a user scrolls past a certain part of the page](http://stackoverflow.com/questions/4627203/jquery-trigger-action-when-a-user-scrolls-past-a-certain-part-of-the-page) – Felix Kling Feb 10 '11 at 13:31

4 Answers4

11

You can get the pixel amount of an element has been scrolled by using .scrollTop(). To listen to scroll events use .scroll().

When you want to identify the halfway, use height of the scroll:

$(window).scroll(function () { 
  if ($(window).scrollTop() > $('body').height() / 2) {
    $('.pineapple-man').show();
  } 
});

If you are scrolling some other element than the whole window/body, please feel free to change the selectors.

To make the showing one-timer, add the removal of scroll event listener, by adding the following after the .show() call:

$(window).unbind('scroll');
Jawa
  • 2,336
  • 6
  • 34
  • 39
  • Hey @jawa your solution worked very well! Only one thing, you forgot the brackets after height > $('body').height() Thanks so0 much for your kind help! – steve Feb 12 '11 at 08:42
2

I guess you want to do something like this:

if($(document).scrollTop() > $(document).height()/2){
   $('.pineapple-man').show();
}

where scrollTop() gets the current horizontal position and height() defines the document height.

usmanali
  • 2,028
  • 2
  • 27
  • 38
0

See the scroll event and the scrollTop method.

Sjoerd
  • 74,049
  • 16
  • 131
  • 175
0

you can use the focus event if you scroll down to it (just like jQuery uses for their comments)

jQuery('selector').focus(function() {
  jQuery('.page').show();
});
Geeo
  • 11
  • 2