Open In App

Bootstrap 5 Scrollspy dispose() Method

Last Updated : 05 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Scrollspy dispose() method is used to remove the ScrollSpy functionality from an element. To use the dispose() method, you will need to select the element that the scrollspy is applied to and call the method on it. For example, if you have applied the scrollspy to a navbar with an ID of “navbar”, you can call the dispose() method as follows.

Syntax:

$('#navbar').scrollspy('dispose');

The dispose() method can be called at any time, even if the Scrollspy is not currently active. If you want to re-enable the Scrollspy after calling the dispose() method, you can simply call the Scrollspy function again with the same configuration as before.

 

Example 1: This code adds two buttons to the page, one to disable the scrollspy and another to enable it. The disable button has an event listener attached to it that is triggered when the button is clicked. The event listener calls the dispose() method of the scrollspy on the body element, which disables the scrollspy. 

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap 5 Scrollspy dispose() Method</title>
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
  
<body data-spy="scroll" data-target=".navbar" 
    data-offset="50">
      
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
      
    <h3>Bootstrap 5 Scrollspy dispose() Method</h3>
  
    <nav class="navbar navbar-expand-sm bg-success 
        navbar-dark fixed-top">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#content1">
                    Home
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#content2">
                    Algo
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#content3">
                    DS
                </a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#"
                    id="navbardrop" data-toggle="dropdown">
                    Languages
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#content4">
                        C
                    </a>
                    <a class="dropdown-item" href="#content5">
                        C++
                    </a>
                </div>
            </li>
        </ul>
    </nav>
      
    <div id="content1" class="container-fluid bg-primary" 
        style="height:250px; padding-top:80px;">
        <p>A computer science portal for geeks</p>
    </div>
    <div id="content2" class="container-fluid bg-light" 
        style="height:250px; padding-top:80px;">
        <h1>Algorithm Analysis</h1>
        <p>A stepwise procedure to solve a problem</p>
    </div>
    <div id="content3" class="container-fluid bg-warning" 
        style="height:250px; padding-top:80px;">
        <h1>Data Structure</h1>
        <p>
            Data structure is a particular way to
            organizing the datain computer memory
            so that it can be used efficiently.
        </p>
    </div>
    <div id="content4" class="container-fluid bg-info" 
        style="height:250px; padding-top:80px;">
        <h1>C Languages</h1>
        <p>
            C is a general-purpose, procedural computer
            programming language used for operating
            systems, libraries, games and other high
            performance work.
        </p>
    </div>
    <div id="content5" class="container-fluid bg-secondary" 
        style="height:250px; padding-top:80px;">
        <h1>C++ Languages</h1>
        <p>
            C++ is an object-oriented programming
            language, developed by Bjarne Stroustrup,
            and is an extension of the C language. It is
            therefore possible to code C++ in a "C style"
            or "object-oriented style."
        </p>
    </div>
    <button id="disable-btn" type="button" 
        class="btn btn-primary">
        Disable Scrollspy
    </button>
    <button id="enable-btn" type="button"
        class="btn btn-secondary">
        Enable Scrollspy
    </button>
    <script>
        $('#disable-btn').click(function () {
            $('body').scrollspy('dispose');
        });
        $('#enable-btn').click(function () {
            $('body').scrollspy({
                target: '.navbar',
                offset: 50
            });
        });
    </script>
</body>
</html>
 






                        










Output:


 


Example 2: This code adds a button to the page with the ID “disable-btn” with class btn btn-primary. The script adds an event listener to the button that is triggered when the button is clicked. The event listener calls the dispose() method of the scrollspy on the body element, which disables the scrollspy. 




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title>Bootstrap 5 Scrollspy dispose() Method</title> 


    <meta charset="utf-8"> 


    <meta name="viewport" content= 


"width=device-width, initial-scale=1"> 


    <link rel="stylesheet" href= 


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 


    <script src= 


"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 


    </script> 


    <script src= 


"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 


    </script> 


    <script src= 


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 


    </script> 


    <style> 


        body { 


            position: relative; 


        } 


  


        ul.nav-pills { 


            top: 20px; 


            position: fixed; 


        } 


  


        div.col-8 div { 


            height: 500px; 


        } 


    </style> 


</head> 


  


<body data-spy="scroll" data-target="#GFG_scrollspy" 


    data-offset="1"> 


    <div style="text-align: center;"> 


        <h1 class="text-success">GeeksforGeeks</h1> 


        <h3>Bootstrap 5 Scrollspy dispose() Method</h3> 


    </div> 


  


    <div class="container-fluid"> 


        <div class="row"> 


            <nav class="col-sm-4 col-4" id="GFG_scrollspy"> 


                <ul class="nav nav-pills flex-column"> 


                    <li class="nav-item"> 


                        <a class="nav-link active" href="#content1"> 


                            Home 


                        </a> 


                    </li> 


                    <li class="nav-item"> 


                        <a class="nav-link" href="#content2"> 


                            Algo 


                        </a> 


                    </li> 


                    <li class="nav-item"> 


                        <a class="nav-link" href="#content3"> 


                            DS 


                        </a> 


                    </li> 


                    <li class="nav-item"> 


                        <a class="nav-link" href="#content4"> 


                            C 


                        </a> 


                    </li> 


                    <li class="nav-item"> 


                        <a class="nav-link" href="#content5"> 


                            C++ 


                        </a> 


                    </li> 


                </ul> 


            </nav> 


  


            <div class="col-sm-8 col-8"> 


                <div id="content1" class="container-fluid bg-primary" 


                    style="height:250px; padding-top:80px;"> 


                    <h3>Bootstrap 5 Scrollspy dispose() Method</h3> 


                </div> 


                <div id="content2" class="container-fluid bg-light" 


                    style="height:250px; padding-top:80px;"> 


                    <h1>Algorithms</h1> 


                    <p>Learn algorithms and data structures</p> 


                </div> 


                <div id="content3" class="container-fluid bg-dark" 


                    style="height:250px; padding-top:80px;"> 


                    <h1>Data Structures</h1> 


  


                    <p>Learn about different data structures</p> 


  


                </div> 


                <div id="content4" class="container-fluid bg-danger" 


                    style="height:250px; padding-top:80px;"> 


                    <h1>C Language</h1> 


                    <p>Learn the C programming language</p> 


                </div> 


                <div id="content5" class="container-fluid bg-warning" 


                    style="height:250px; padding-top:80px;"> 


                    <h1>C++ Language</h1> 


                    <p>Learn the C++ programming language</p> 


                </div> 


            </div> 


        </div> 


    </div> 


  


    <!-- Buttons to disable the dispose() method -->


    <button id="disable-btn" type="button" 


        class="btn btn-primary"> 


        Disable Scrollspy 


    </button> 


    <script> 


        $('#disable-btn').click(function () { 


            $('body').scrollspy('dispose'); 


        }); 


    </script> 


</body> 


</html>



















                        







                        










Output:


 


Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/#dispose


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Spinners Growing
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Spinners Margin
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Popovers dispose() Method
            

        
    
        
            

                Bootstrap 5 Tooltips dispose() Method
            

        
    
        
            

                Bootstrap 5 Modal dispose() Method
            

        
    
        
            

                Bootstrap 5 Toasts dispose() Method
            

        
    
        
            

                Bootstrap 5 List group dispose() Method
            

        
    
        
            

                What does .modal('dispose') do in Bootstrap 4 ?
            

        
    
        
            

                Bootstrap 5 Scrollspy getInstance() Method
            

        
    
        
            

                Bootstrap 5 Scrollspy getOrCreateInstance() Method
            

        
    
        
            

                Bootstrap 5 Scrollspy refresh() Method
            

        
    
        
            

                Bootstrap 5 Scrollspy Options
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
S

        

            
        

        

                                    


                                    

                                        smeet002                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox