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

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.

Answer 1

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();
});