How to show Toast at Bottom-left after Scroll Down in Bootstrap 5 ?

Last Updated : 19 Feb, 2024

Toasts are quick, gentle pop-up messages that keep users informed without interrupting. To achieve this functionality bootstrap does not provide any built-in class. But we can achieve it by combining utility classes like position-fixed, bottom-0, and start-0, and you can position the toast at the bottom-left corner of the viewport.

Syntax

if (scrollPosition > triggerPosition) 
{  
  toast.show();
} 
else 
{  
  toast.hide(); 
}

Preview:

Output

Approach:

Firstly, Integrate the Bootstrap vis CDN links. Then, the toast notification is defined within a div element with the classes position-fixed bottom-0 start-0 p-3. This positions the toast at the bottom-left corner of the viewport.
window.addEventListener adds an event listener to the window object for the ‘scroll’ event. Whenever the user scrolls the page, the function inside the event listener will be executed.
The if condition checks if the current scroll position (scrollPosition) is greater than the trigger position (triggerPosition). If so, it shows the toast using toast.show(). If not, it hides the toast using toast.hide().
This ensures that the toast appears only when the user scrolls beyond the specified trigger position.

Example: Illustration of showing toast at bottom-left after scrolling down in Bootstrap 5.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Toast with Scroll Trigger</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
      </script>
</head>
 
<body>
 
    <!-- Toast Markup -->
    <div class="position-fixed bottom-0 start-0 p-3"
         style="z-index: 11">
        <div class="toast"
             role="alert"
             aria-live="assertive"
             aria-atomic="true"
             data-bs-autohide="false"
             style="background-color:green; color: #fff;">
            <div class="toast-body">
                You have scrolled down!
            </div>
        </div>
    </div>
 
    <!-- Example content to trigger scrolling -->
    <div style="height: 2000px;">
        <p>
            HTML stands for HyperText Markup Language. It creates a
              complete website structure of web pages. HTML is a 
              combination of Hypertext and Markup language. Hypertext
              defines the link between the web pages and markup language
              defines the text document within the tag. This HTML Tutorial
              provides basic to advanced concepts for beginners and 
              professionals. HTML is a markup language used by the browser
              to manipulate text, images, and other content, in order to
            display it in the required format. HTML was created by Tim
              Berners-Lee in 1991. The first-ever version of HTML was HTML
              1.0, but the first standard version was HTML 2.0, published
              in 1995. The HTML heading tag is used to define the headings
              of a page. There are six levels of headings defined by HTML.
              These 6 heading elements are h1, h2, h3, h4, h5, and h6; with
              h1 being the highest level and h6 being the least. Search
              Engines use headings for indexing the structure and organizing
              the content of the webpage. Headings are used for highlighting
              important topics. They provide valuable information and tell 
              us about the structure of the document.The tag which stands for
            the horizontal rule is used to define a thematic break in an HTML
              page. The tag is an empty tag, and it does not require any end tag.
              It is basically used to separate content. Please refer to the HTML 
              Tag article for more detailed information.
        </p>
    </div>
 
    <script>
       
        // JavaScript to show toast when scrolling down
        window.addEventListener('scroll', function () {
            var scrollPosition = window.scrollY;
           
              // Adjust as needed, this is the scroll position 
           // where the toast will appear
            var triggerPosition = 200; 
            var toastElement = document.querySelector('.toast');
            var toast = new bootstrap.Toast(toastElement);
 
            if (scrollPosition > triggerPosition) {
                toast.show();
            } else {
               
              // Hide the toast when scrolling back to the top
                toast.hide(); 
            }
        });
    </script>
 
</body>
 
</html>