How do i use jquery to show content only when the scrolling has reached a certain point?

Question

I've been working with JQuery but never worked on something like this.

What I am trying to do is this:

When the user scrolls down to the footer of the page, i then want to use JQuery to start display 10 paragraphs of content that load right under the footer. How can I do this using JQuery? Any existing plugins or tips?

I looked up infinite scroll and stuff like that but I am not sure how to trigger the showing of the content ONLY when the user is past the footer.

nullability · Answer 1 · 2013-07-08T21:55:23.327

Bind a listener to the scroll event and monitor the scroll position. Once it passes a certain value, show the content.

You can get the scroll position using .scrollTop() and compare it to either a fixed value or the position of the footer from .offset(). Don't forget to add the window height so it will trigger as soon as the footer is visible.

For example:

$(document).scroll(function() {
    var value = $("#footer").offset().top,
        position = $(document).scrollTop() + $(window).height();
    if (position >= value) {
        $(".content").show();
    }
});

To ensure that the content is shown if the footer happens to be visible without needing to scroll, you can trigger the scroll event on ready:

$(document).ready(function() {
    $(document).scroll();
});

Mr.Web · Accepted Answer · 2013-07-08T23:34:16.950

1

Actually the correct code needs to show the paragraphs as the footer is visible, so you have to add the window height parameter:

var target = $("#footer").offset().top-$(window).height();

Do it like this:

var target = $("#footer").offset().top-$(window).height();
$(document).scroll(function() {
    if ($(window).scrollTop() >= target) {
        $(".content").show();
    }
});

If you don't set the window-height the footer has to arrive at the top of your window, which I don't think is what you want.

You can try it here: JSFiddle

edited Jul 08 '13 at 23:34

answered Jul 08 '13 at 21:54

Mr.Web

6,992
8
51
86

i get the following error if i use your code: TypeError: $(...).offset(...) is undefined var target = $("#footer").offset().top-$(window).height(); – starbucks Jul 08 '13 at 21:58
I am using this: – starbucks Jul 08 '13 at 22:49
your fiddle doesn't work either. the bottom text shows regardless. – starbucks Jul 08 '13 at 23:08
Works perfectly on my computer, try once more with the last update: [http://jsfiddle.net/r6AXH/4/](http://jsfiddle.net/r6AXH/4/) At this point if still not working, I think you should explain better what you want to achieve, maybe I'm doing something different from what you want. – Mr.Web Jul 08 '13 at 23:33
[https://dl.dropboxusercontent.com/u/2276958/fiddle.mov](https://dl.dropboxusercontent.com/u/2276958/fiddle.mov) !!! – Mr.Web Jul 08 '13 at 23:37
ok go it to work. how can i make it show slowly. I decided to use fadeIn("2000") but it's still too fast. Thanks! – starbucks Jul 08 '13 at 23:41
This is how i am doing it: $(".content").fadeIn("5000"); – starbucks Jul 08 '13 at 23:43
Rise the number as you wish, those are milliseconds BUT remove the quotes. Is $(".content").fadeIn(5000); is a number not a string. So is my answer ok? – Mr.Web Jul 08 '13 at 23:45
The script is creating problems on different browsers and os. it doesn't recognize the bottom of the screen consistently. how can i modify it to use a height that i define? – starbucks Jul 09 '13 at 21:12
Change the variable target removing "$(window).height()" and put the number you want, has to become: var target = $("#footer").offset().top-800; – Mr.Web Jul 09 '13 at 21:30

How do i use jquery to show content only when the scrolling has reached a certain point?

2 Answers2