The example of u sing List group

Bootstrap 5 Demo

Bootstrap 5 Code		Output
<html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <style> body{ position: relative; } .list-group{ position: sticky; top: 15px; } </style> </head> <body data-bs-spy="scroll" data-bs-offset="15" data-bs-target="#JAZScrollspy"> <div class="container-lg my-2"> <h2 class="text-success">A Demo of Scrollspy with List Group</h2><br> <div class="row"> <div class="col-sm-3" id="JAZScrollspy"> <div class="list-group"> <a class="list-group-item list-group-item-action active" href="#section1">C++</a> <a class="list-group-item list-group-item-action" href="#section2">Python</a> <a class="list-group-item list-group-item-action" href="#section3">C#</a> <a class="list-group-item list-group-item-action" href="#section4">Kotlin</a> <a class="list-group-item list-group-item-action" href="#section5">GoLang</a> <a class="list-group-item list-group-item-action" href="#section6">Java</a> </div> </div> <div class="col-sm-9"> <div id="section1"> <h2>C++</h2> <p>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.</p> <p>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.</p> </div> <hr> <div id="section2"> <h2>Python</h2> <p>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.</p> </div> <hr> <div id="section3"> <h2>C#</h2> <p>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.</p> </div> <hr> <div id="section4"> <h2>Kotlin</h2> <p>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.</p> </div> <hr> <div id="section5"> <h2>GoLang</h2> <p>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.</p> </div> <hr> <div id="section6"> <h2>Java</h2> <p>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.</p> <p>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.</p> </div> </div> </div> </div> </body> </html>		A Demo of Scrollspy with List Group C++ Python C# Kotlin GoLang Java C++ 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. 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. Python 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. C# 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. Kotlin 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. GoLang 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. Java 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. 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.