{"id":8102,"date":"2023-02-10T09:33:11","date_gmt":"2023-02-10T09:33:11","guid":{"rendered":"https:\/\/www.jquery-az.com\/?p=8102"},"modified":"2023-11-20T02:05:11","modified_gmt":"2023-11-20T02:05:11","slug":"bootstrap-5-scrollspy","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/","title":{"rendered":"Bootstrap 5 Scrollspy &#8211; 2 Examples with navbar and List Group"},"content":{"rendered":"<h3><strong>Scrollspy in Bootstrap 5<\/strong><\/h3>\n<p>As the user scrolls through your website, scrollspy component automatically updates the links in the navigation list.<\/p>\n<p>This might particularly be useful for long pages with different sections. For example, your website has header navigation with the following links:<\/p>\n<p>Home, Offers, Price, Contact, About<\/p>\n<p>Your home page contains all this information on a single page.<\/p>\n<p>Users may click on any link to directly navigate to that particular section. Alternatively, as they scroll down and reach to particular section \u2013 e.g. Offers to Contact section \u2013 in that case, the scrollspy component makes the Contact link active on header navigation.<\/p>\n<h3><strong>An example of Scrollspy using Bootstrap 5<\/strong><\/h3>\n<p>In this example, we have a top-right menu that is fixed. As you scroll down, you can see the <strong>active<\/strong> content\u2019s link is highlighted.<\/p>\n<p>Have a look at the output below along with the code and it is explained after how it worked:<\/p>\n<h6><a href=\"\/bootstrap5\/demo.php?ex=72.0_1\" target=\"_blank\" rel=\"noopener nofollow\">Online demo and code<\/a><\/h6>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-8103\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/23-1-Bootstrap5-scrollspy.jpg\" alt=\"Bootstrap5-scrollspy\" width=\"876\" height=\"663\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/23-1-Bootstrap5-scrollspy.jpg 876w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/23-1-Bootstrap5-scrollspy-300x227.jpg 300w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/23-1-Bootstrap5-scrollspy-768x581.jpg 768w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/23-1-Bootstrap5-scrollspy-385x290.jpg 385w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/23-1-Bootstrap5-scrollspy-200x150.jpg 200w\" sizes=\"(max-width: 876px) 100vw, 876px\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;style&gt;\r\n\r\n\u00a0 body {\r\n\r\n\u00a0 \u00a0 \u00a0 position: relative;\r\n\r\n\u00a0 }\r\n\r\n\u00a0 .cust1{\r\n\r\n\u00a0 \u00a0 padding:100px 20px;\r\n\r\n\u00a0 }\r\n\r\n\u00a0 &lt;\/style&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;body data-bs-spy=\"scroll\" data-bs-target=\".navbar\" data-bs-offset=\"50\"&gt;\r\n\r\n&lt;nav class=\"navbar navbar-expand-sm bg-dark navbar-dark fixed-top\"&gt;\r\n\r\n\u00a0 &lt;div class=\"container-fluid \" &gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"navbar-nav ms-auto mb-2 mb-lg-0\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li class=\"nav-item\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"nav-link\" href=\"#comp1\"&gt;Home&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li class=\"nav-item\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"nav-link\" href=\"#comp2\"&gt;Products&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li class=\"nav-item\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"nav-link\" href=\"#comp3\"&gt;Specials&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li class=\"nav-item\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"nav-link\" href=\"#comp4\"&gt;Price&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li class=\"nav-item\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"nav-link\" href=\"#comp5\"&gt;Contact&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li class=\"nav-item\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"nav-link\" href=\"#comp6\"&gt;About&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;\/li&gt;\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n&lt;\/nav&gt;\r\n\r\n&lt;div id=\"comp1\" class=\"container-fluid bg-secondary text-white cust1\" &gt;\r\n\r\n\u00a0 &lt;h1&gt;Home&lt;\/h1&gt;\r\n\r\n\u00a0 &lt;p&gt;Content like Carousel goes here&lt;\/p&gt;\r\n\r\n\u00a0 &lt;p&gt;Add more content here&lt;\/p&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=\"comp2\" class=\"container-fluid bg-primary text-white cust1\"&gt;\r\n\r\n\u00a0 &lt;h1&gt;Products&lt;\/h1&gt;\r\n\r\n\u00a0 &lt;p&gt;List of Products&lt;\/p&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=\"comp3\" class=\"container-fluid bg-info text-white cust1\" &gt;\r\n\r\n\u00a0 &lt;h1&gt;Specials&lt;\/h1&gt;\r\n\r\n\u00a0 &lt;p&gt;Special Products Information Go here&lt;\/p&gt;\r\n\r\n\u00a0 &lt;p&gt;Add some images etc.&lt;\/p&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;div id=\"comp4\" class=\"container-fluid bg-warning cust1\" &gt;\r\n\r\n\u00a0 &lt;h1&gt;Price&lt;\/h1&gt;\r\n\r\n\u00a0 &lt;p&gt;Price Table \/ Cards &lt;\/p&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=\"comp5\" class=\"container-fluid bg-danger text-white cust1\" &gt;\r\n\r\n\u00a0 &lt;h1&gt;Contact&lt;\/h1&gt;\r\n\r\n\u00a0 &lt;p&gt;Contact Form here&lt;\/p&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=\"comp6\" class=\"container-fluid bg-success text-white cust1\" &gt;\r\n\r\n\u00a0 &lt;h1&gt;About&lt;\/h1&gt;\r\n\r\n\u00a0 &lt;p&gt;About Company\/Product\/Services&lt;\/p&gt;\r\n\r\n\u00a0 &lt;p&gt;Link1&lt;\/p&gt;\r\n\r\n\u00a0 &lt;p&gt;Link2&lt;\/p&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p><strong>How does it work?<\/strong><\/p>\n<ul>\n<li>You may use scrollspy component with the <strong>nav<\/strong> or <strong>list group<\/strong>.<\/li>\n<li>In the example above and below, notice the &lt;style&gt; section under the &lt;head&gt; tag. There, <strong>position: relative;<\/strong> is used, which is required. We used it at &lt;body&gt; level.<\/li>\n<li>&lt;a&gt; tags are used in both examples, which are also required. They point to an element by <strong>id<\/strong>.<\/li>\n<\/ul>\n<h3><strong>The example of using List group<\/strong><\/h3>\n<p>Scrollspy component can also be used with the list group to show which content part the user is on.<\/p>\n<p>In the example below, we have six list items. Scroll down the page and you will see list group items highlight:<\/p>\n<h6><a href=\"\/bootstrap5\/demo.php?ex=72.0_2\" target=\"_blank\" rel=\"noopener nofollow\">Online demo and code<\/a><\/h6>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-8104\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/23-2-BS5-scrollspy-listgrou.jpg\" alt=\"BS5-scrollspy-listgrou\" width=\"862\" height=\"481\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/23-2-BS5-scrollspy-listgrou.jpg 862w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/23-2-BS5-scrollspy-listgrou-300x167.jpg 300w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/23-2-BS5-scrollspy-listgrou-768x429.jpg 768w\" sizes=\"(max-width: 862px) 100vw, 862px\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;style&gt;\r\n\r\nbody{\r\n\r\n\u00a0 position: relative;\r\n\r\n}\r\n\r\n.list-group{\r\n\r\n\u00a0 \u00a0 position: sticky;\r\n\r\n\u00a0 \u00a0 top: 15px;\r\n\r\n}\r\n\r\n&lt;\/style&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;body data-bs-spy=\"scroll\" data-bs-offset=\"15\" data-bs-target=\"#JAZScrollspy\"&gt;\r\n\r\n&lt;div class=\"container-lg my-2\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;h2 class=\"text-success\"&gt;A Demo of Scrollspy with List Group&lt;\/h2&gt;&lt;br&gt;\r\n\r\n\u00a0 \u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"col-sm-3\" id=\"JAZScrollspy\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"list-group\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"list-group-item list-group-item-action \u00a0active\" href=\"#section1\"&gt;C++&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"list-group-item list-group-item-action\" href=\"#section2\"&gt;Python&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"list-group-item list-group-item-action\" href=\"#section3\"&gt;C#&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"list-group-item list-group-item-action\" href=\"#section4\"&gt;Kotlin&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"list-group-item list-group-item-action\" href=\"#section5\"&gt;GoLang&lt;\/a&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"list-group-item list-group-item-action\" href=\"#section6\"&gt;Java&lt;\/a&gt; \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"col-sm-9\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;div id=\"section1\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;h2&gt;C++&lt;\/h2&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.&lt;\/p&gt;\r\n\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;hr&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;div id=\"section2\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;h2&gt;Python&lt;\/h2&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.&lt;\/p&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;hr&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;div id=\"section3\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;h2&gt;C#&lt;\/h2&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.&lt;\/p&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;hr&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;div id=\"section4\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;h2&gt;Kotlin&lt;\/h2&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.&lt;\/p&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;hr&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;div id=\"section5\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;h2&gt;GoLang&lt;\/h2&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.&lt;\/p&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;hr&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;div id=\"section6\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;h2&gt;Java&lt;\/h2&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.&lt;\/p&gt;\r\n\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;\/div&gt; \u00a0 \u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>Reference: <a href=\"https:\/\/getbootstrap.com\/docs\/5.0\/components\/scrollspy\/\" target=\"_blank\" rel=\"nofollow\">https:\/\/getbootstrap.com\/docs\/5.0\/components\/scrollspy\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As user scrolls through your website, scrollspy component automatically updates the links in the navigation list.<\/p>\n","protected":false},"author":1,"featured_media":8103,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[136],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap 5 Scrollspy - 2 Examples with navbar and List Group<\/title>\n<meta name=\"description\" content=\"As user scrolls through your website, scrollspy component automatically updates the links in the navigation list.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap 5 Scrollspy - 2 Examples with navbar and List Group\" \/>\n<meta property=\"og:description\" content=\"As user scrolls through your website, scrollspy component automatically updates the links in the navigation list.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-10T09:33:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-20T02:05:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/23-1-Bootstrap5-scrollspy.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"876\" \/>\n\t<meta property=\"og:image:height\" content=\"663\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/\",\"url\":\"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/\",\"name\":\"Bootstrap 5 Scrollspy - 2 Examples with navbar and List Group\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2023-02-10T09:33:11+00:00\",\"dateModified\":\"2023-11-20T02:05:11+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"description\":\"As user scrolls through your website, scrollspy component automatically updates the links in the navigation list.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap 5 Scrollspy &#8211; 2 Examples with navbar and List Group\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap 5 Scrollspy - 2 Examples with navbar and List Group","description":"As user scrolls through your website, scrollspy component automatically updates the links in the navigation list.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap 5 Scrollspy - 2 Examples with navbar and List Group","og_description":"As user scrolls through your website, scrollspy component automatically updates the links in the navigation list.","og_url":"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/","article_published_time":"2023-02-10T09:33:11+00:00","article_modified_time":"2023-11-20T02:05:11+00:00","og_image":[{"width":876,"height":663,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/23-1-Bootstrap5-scrollspy.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/","url":"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/","name":"Bootstrap 5 Scrollspy - 2 Examples with navbar and List Group","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2023-02-10T09:33:11+00:00","dateModified":"2023-11-20T02:05:11+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"description":"As user scrolls through your website, scrollspy component automatically updates the links in the navigation list.","breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/bootstrap-5-scrollspy\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap 5 Scrollspy &#8211; 2 Examples with navbar and List Group"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/8102"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=8102"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/8102\/revisions"}],"predecessor-version":[{"id":11428,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/8102\/revisions\/11428"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/8103"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=8102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=8102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=8102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}