如何在不单击引导程序中的按钮的情况下在右上角加载通知警报？

Bootstrap Toast组件提供了一种模拟推送通知功能的简便方法。 Bootstrap Toast就像一个警报框，每当事件发生时，它都可以显示给用户。该组件是使用CSS flexbox构建的，可以轻松定位和对齐。
单击按钮时不必显示吐司。可以针对浏览器中发生的任何类型的事件进行显示。让我们来看一个例子。

示例：创建引导通知/吐司。在此示例中，当用户滚动页面中的

时，我们将显示推送通知。要创建自举吐司，我们需要在一个分区上使用toast类，并在其中添加两个分区，并添加类toast-header和toast-body 。我们将使用jquery显示通知。

  

    
        How to load notification alert on top
        right corner without click of button 
        in bootstrap ?
    
      
    
      
    
          
    
  
    
    
      
    
    
      
    
    
      
    
        #notification {
            position: absolute;
            top: 0;
            right: 0;
        }
        #para {
            border: 1px solid black;
            width: 300px;
            height: 100px;
            overflow: scroll;
        }
        .toast-color {
            color: white;
            background-color: #33b5e5;
        }
        h1 {
            color:green;
        }
    

  

    GeeksforGeeks
  
    Try Scrolling:
      
    
        GeeksforGeeks: A computer science portal
        for geeks. It ia a good website for learning
        computer science. It has a good programming
        Question and have many Interwiew Experiences.
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course.
    
      
    
        
            SCROLLED!
            Just Now
              
            
                ×
            
        
          
        
            Hi! You just scrolled the paragaraph.
        
    
  
    
        $(document).ready(function() {
            $("#para").scroll(function() {
                $('.toast').toast('show');
            });
        });
    

  

输出：

• 滚动内容之前：
  
• 滚动内容后：