Ways to reveal a div once the user reaches the bottom of the page

Question

Ways to reveal a div once the user reaches the bottom of the page

This code snippet I am currently using helps the user keep track of their position on the page.

I'm interested in making a modification to this code: How can I make a div appear when the user reaches the bottom of the page, and stay visible until they refresh?

#show {display: none}

<div id="show">
<p>Hello</p>
<p>World!</p>
</div>

I want to display the div '#show' when the user scrolls to the bottom of the page, and have it remain visible as long as they are on that page.

javascript jquery html css

Answer 1

Answer №1

By following a convention similar to the example JS code:

        $(window).scroll(function() {
          var wintop = $(window).scrollTop(),
            docheight = $(document).height(),
            winheight = $(window).height(),
            scrolled = (wintop / (docheight - winheight)) * 100;

          if (scrolled >= 100) {
            $(yourDiv).show();
          }
        });

The calculation of the scroll percentage is taken directly from the source you shared and the condition simply checks if you have reached 100% of the page (excluding the current window size).

You can also adjust the value from 100 to any desired percentage in order to display the div before the user reaches the very bottom.

Answer 2

By following a convention similar to the example JS code:

        $(window).scroll(function() {
          var wintop = $(window).scrollTop(),
            docheight = $(document).height(),
            winheight = $(window).height(),
            scrolled = (wintop / (docheight - winheight)) * 100;

          if (scrolled >= 100) {
            $(yourDiv).show();
          }
        });

The calculation of the scroll percentage is taken directly from the source you shared and the condition simply checks if you have reached 100% of the page (excluding the current window size).

You can also adjust the value from 100 to any desired percentage in order to display the div before the user reaches the very bottom.

Answer 3

Answer №2

Here's a possible solution:

$(window).on('scroll', function(){
    var bottomOfPage = $(window).scrollTop() + $(window).height();
    if( bottomOfPage >= $(document).height() ) $("#show").show();
});

Answer 4

Here's a possible solution:

$(window).on('scroll', function(){
    var bottomOfPage = $(window).scrollTop() + $(window).height();
    if( bottomOfPage >= $(document).height() ) $("#show").show();
});

Answer 5

Answer №3

In order to execute a Javascript function when the element with the ID of "show" becomes visible in the client's viewport, consider utilizing a plugin such as jquery.appear

Answer 6

In order to execute a Javascript function when the element with the ID of "show" becomes visible in the client's viewport, consider utilizing a plugin such as jquery.appear

Answer 7

Answer №4

Here is the code snippet to achieve the desired functionality:

let isVisible = false;
$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height() || !isVisible) {
       $("#show").show();
       isVisible = true;
   }
});

Answer 8

Here is the code snippet to achieve the desired functionality:

let isVisible = false;
$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height() || !isVisible) {
       $("#show").show();
       isVisible = true;
   }
});

Ways to reveal a div once the user reaches the bottom of the page

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The readStream in Node.JS unexpectedly terminates before the writeStream

JQuery.each is causing an issue due to a potential conflict between JSON and string data types

Having trouble locating and interacting with the textarea element in Salesforce using Selenium Webdriver

Securing CKEditor image upload URL with encryption

What is the process for displaying a document file in an iframe that is returned from a link's action?

Deciphering base64 encoded data inside an HTML document and substituting these encoded strings with their decoded representation using Python

What is the best way to arrange an array of identical objects based on a specific sub property?

How can we seamlessly transition from adding a class to setting scrollTop on a particular div?

Rotating Images with CSS Transitions

What could be causing the malfunction in my jQuery .each loop when trying to access the attribute of each element?

Slide up a div to reveal another div in its spot

Tool for tracking response time on basic Ajax-requested webpage

The perfect method for creating template literals using a function

Dealing with AJAX errors consistently in jQuery

Utilize generic types within methods in TypeScript

Tips for managing ajax responses using jquery

Retrieve Data from HTML Table using jQuery

Why isn't the Bootstrap carousel showing up on my webpage?

Failed: Protractor could not synchronize with the page due to an error saying "angular is not present on the window"

Having difficulty creating a responsive table with Bootstrap