Bootstrap 5 Scrollspy refresh() Method
Bootstrap 5 Scrollspy provides a refresh() method that is invoked while including or discarding the elements in the DOM tree, i.e., it can be manually called to recalculate the active link based on the current scroll position. This method can be used to update the active link whenever the page content changes dynamically.
The ScrollSpy constructor is used to create a new scroll spy instance on the document.body element with the #navbar as the target. The refresh() method is called on the scrollspy instance to refresh the scrollspy.
Syntax:
let scrollspy = new bootstrap.ScrollSpy(document.body, { target: '#navbar' }) scrollspy.refresh()
Approach 1: Here, the HTML code contains a navigation menu with four items. Each item is a hyperlink with a unique ID that corresponds to a section of the page that the user can scroll to. The ‘data-bs-spy‘, ‘data-bs-target‘, and ‘data-bs-offset‘ attributes are added to the container div to activate Scrollspy functionality. The JavaScript code initializes the Scrollspy by creating a new instance of the bootstrap.ScrollSpy class. An event listener is added to the “Toggle Section” button. When the button is clicked, this will show or hide one of the sections on the page.
After the display property is toggled, the scrollSpy.refresh() method is called to update the scroll spy. This method recalculates the positions of the target elements and updates the scrollspy accordingly.
Example 1: The following code example illustrates the basic usage of the refresh() Method for updating scrollspy after rendering/hiding sections.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title > Bootstrap Scrollspy Refresh Example </ title > < meta charset = "utf-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 "> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body class = "m-3" > < nav id = "navbar" class="navbar fixed-top navbar-light bg-light px-3"> < a class = "navbar-brand" href = "#" > Navbar </ a > < ul class = "nav nav-pills" > < li class = "nav-item" > < a class = "nav-link " href = "#scrollspy-list-item1" > Item 1 </ a > </ li > < li class = "nav-item" > < a class = "nav-link" href = "#scrollspy-list-item2" > Item 2 </ a > </ li > < li class = "nav-item" > < a class = "nav-link" href = "#scrollspy-list-item3" > Item 3 </ a > </ li > < li class = "nav-item" > < a class = "nav-link" href = "#scrollspy-list-item4" > Item 4 </ a > </ li > </ ul > </ nav > < br >< br >< br > < h1 class = "text-success text-center" >w3wiki</ h1 > < div data-bs-spy = "scroll" data-bs-target = "#navbar-example2" data-bs-offset = "50" tabindex = "0" > < div id = "scrollspy-list-item1" > < h4 >Item 1</ h4 > < p > HTML stands for HyperText Markup Language. It is used to design web pages using the markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages and markup language defines the text document within the tag that define the structure of web pages. </ p > </ div > < div id = "scrollspy-list-item2" > < h4 >Item 2</ h4 > < p > we will see the HTML Basics by understanding all the basic stuff of HTML coding. There are various tags that we must consider and include while starting to code in HTML. These tags help in the organization and basic formatting of elements in our script or web pages. These step-by-step procedures will guide you through the process of writing HTML. </ p > </ div > < div id = "scrollspy-list-item3" > < h4 >Item 3</ h4 > < p > CSS (Cascading Style Sheets)is used to apply styles to web pages. Cascading Style Sheets are fondly referred to as CSS. It is used to make web pages presentable. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independently of the HTML that makes up each web page. </ p > </ div > < div id = "scrollspy-list-item4" > < h4 >Item 4</ h4 > < p > Java is one of the most popular and widely used programming language and platform. A platform is an environment that helps to develop and run programs written in any programming language. </ p > </ div > </ div > < button id = "toggle-section" class = "btn btn-primary" > Toggle Section </ button > < script > // Initialize Scrollspy let scrollSpy = new bootstrap.ScrollSpy(document.body, { target: '#navbar' }); // Add event listener to toggle-section button let toggleSection2Btn = document.getElementById('toggle-section'); toggleSection2Btn.addEventListener('click', function () { // Toggle the display property of section4 let section2 = document.getElementById('scrollspy-list-item4'); section2.style.display = section2.style.display === 'none' ? 'block' : 'none'; alert('item 4 changed'); // Call refresh method to update Scrollspy scrollSpy.refresh(); }); </ script > </ body > </ html > |
Output:
Approach 2: Here, the code creates a fixed-top navbar with four navigation links that correspond to four sections on the page. The data-bs-spy attribute on the HTML div element that wraps these sections enables the Scrollspy component. The data-bs-target attribute specifies the ID of the navbar that will be used for navigation, and the data-bs-offset attribute specifies the number of pixels to offset from the top when calculating the position of scrollable elements.
The JavaScript code initializes the Scrollspy component using bootstrap.ScrollSpy constructor. Then, the code adds an event listener to the “Change Section Heights” button that randomly changes the height of each section using JavaScript’s Math.random() method. After each change, the code calls the Scrollspy’s refresh() method to update the scrollspy component with the new section heights.
Example 2: This code example demonstrates the usage of the refresh() Method for updating Scrollspy after dynamically changing section heights.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title > Bootstrap Scrollspy Refresh Example </ title > < meta charset = "utf-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 "> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body class = "m-3" > < nav id = "navbar" class="navbar fixed-top navbar-light bg-light px-3"> < a class = "navbar-brand" href = "#" > Navbar </ a > < ul class = "nav nav-pills" > < li class = "nav-item" > < a class = "nav-link " href = "#scrollspy-list-item1" > Item 1 </ a > </ li > < li class = "nav-item" > < a class = "nav-link" href = "#scrollspy-list-item2" > Item 2 </ a > </ li > < li class = "nav-item" > < a class = "nav-link" href = "#scrollspy-list-item3" > Item 3 </ a > </ li > < li class = "nav-item" > < a class = "nav-link" href = "#scrollspy-list-item4" > Item 4 </ a > </ li > </ ul > </ nav > < br >< br >< br > < h1 class = "text-success text-center" > w3wiki </ h1 > < div data-bs-spy = "scroll" data-bs-target = "#navbar-example2" data-bs-offset = "50" tabindex = "0" > < h4 id = "scrollspy-list-item1" style="height:300px; border:3px solid red;"> Item 1 </ h4 > < h4 id = "scrollspy-list-item2" style="height:300px; border:3px solid blue;"> Item 2 </ h4 > < h4 id = "scrollspy-list-item3" style="height:300px; border:3px solid green;"> Item 3 </ h4 > < h4 id = "scrollspy-list-item4" style="height:300px; border:3px solid rgb(183, 51, 119);"> Item 4 </ h4 > </ div > < button id = "change-section-height" class = "btn btn-primary mt-5" > Change Section Heights </ button > < script > // Initialize Scrollspy let scrollSpy = new bootstrap.ScrollSpy(document.body, { target: '#navbar' }); // Add event listener to change-section-height button let changeSectionHeightBtn = document.getElementById('change-section-height'); changeSectionHeightBtn.addEventListener('click', function () { let section1 = document.getElementById('scrollspy-list-item1'); section1.style.height = (Math.random() * 700) + 'px'; let section2 = document.getElementById('scrollspy-list-item2'); section2.style.height = (Math.random() * 800) + 'px'; let section3 = document.getElementById('scrollspy-list-item3'); section3.style.height = (Math.random() * 500) + 'px'; let section4 = document.getElementById('scrollspy-list-item4'); section4.style.height = (Math.random() * 100) + 'px'; scrollSpy.refresh(); }); </ script > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.2/components/scrollspy/#methods
Contact Us