ScrollSpy

Navbar Scrollspy

Add data-bs-spy="scroll" and data-bs-target="#navId" where navId is the unique id of the associated navigation. Scroll the area below the navbar and watch the active class change.

Section 1

For the scrollspy page, this is some placeholder content. Take note of the highlighted navigation link at the bottom of the page as you scroll down. It appears again and again in the component example. To highlight the scrolling and highlighting, we're going to keep adding more sample copy here.

Section 2

The content that appears here is a placeholder for the scrollspy page. The relevant navigation link is highlighted as you scroll down the page. The component example contains repetitions of it. In order to highlight the scrolling and highlighting, we will continue to add more sample copy here.

Section 3

This is some stuff that is meant to be on the scrollspy page. Keep in mind that the relevant navigation link is highlighted as you scroll down the page. The component example uses it repeatedly. Here, we continue to add sample copy to highlight the scrolling and highlighting.

Section 4

This content is a stand-in for the scrollspy page. You'll notice that the relevant navigation link is highlighted as you scroll down the page. It appears again in the component example. Here, we'll continue to add sample copy to highlight the scrolling and highlighting.

Section 5

For the scrollspy page, this is some placeholder content. Take note of the highlighted navigation link at the bottom of the page as you scroll down. It appears again and again in the component example. To highlight the scrolling and highlighting, we're going to keep adding more sample copy here.

<div class="card-body navbar-scrollspy">
   <nav class="navbar bg-body-tertiary px-3 mb-3" id="navbar-scrollspy1"><a class="navbar-brand" href="#"><img class="img-fluid for-light" src="../assets/images/logo/logo.png" alt="logo"><img class="img-fluid for-dark" src="../assets/images/logo/logo_dark.png" alt="logo"></a>
       <ul class="nav nav-pills">
           <li class="nav-item"><a class="nav-link" href="#scrollspyHeading1">Section 1</a></li>
           <li class="nav-item"><a class="nav-link" href="#scrollspyHeading2">Section 2</a></li>
           <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
               <ul class="dropdown-menu">
                   <li><a class="dropdown-item" href="#scrollspyHeading3">Section 3</a></li>
                   <li><a class="dropdown-item" href="#scrollspyHeading4">Section 4</a></li>
                   <li>
                       <hr class="dropdown-divider">
                   </li>
                   <li><a class="dropdown-item" href="#scrollspyHeading5">Section 5</a></li>
               </ul>
           </li>
       </ul>
   </nav>
   <div class="scrollspy-example bg-body-tertiary p-3 rounded-2 custom-scrollbar" data-bs-spy="scroll" data-bs-target="#navbar-scrollspy1" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
       <h6 id="scrollspyHeading1">Section 1</h6>
       <p>For the scrollspy page, this is some placeholder content. Take note of the highlighted navigation link at the bottom of the page as you scroll down. It appears again and again in the component example. To highlight the scrolling and highlighting, we're going to keep adding more sample copy here.</p>
       <h6 id="scrollspyHeading2">Section 2</h6>
       <p>The content that appears here is a placeholder for the scrollspy page. The relevant navigation link is highlighted as you scroll down the page. The component example contains repetitions of it. In order to highlight the scrolling and highlighting, we will continue to add more sample copy here.</p>
       <h6 id="scrollspyHeading3">Section 3</h6>
       <p>This is some stuff that is meant to be on the scrollspy page. Keep in mind that the relevant navigation link is highlighted as you scroll down the page. The component example uses it repeatedly. Here, we continue to add sample copy to highlight the scrolling and highlighting.</p>
       <h6 id="scrollspyHeading4">Section 4</h6>
       <p>This content is a stand-in for the scrollspy page. You'll notice that the relevant navigation link is highlighted as you scroll down the page. It appears again in the component example. Here, we'll continue to add sample copy to highlight the scrolling and highlighting.</p>
       <h6 id="scrollspyHeading5">Section 5</h6>
       <p>For the scrollspy page, this is some placeholder content. Take note of the highlighted navigation link at the bottom of the page as you scroll down. It appears again and again in the component example. To highlight the scrolling and highlighting, we're going to keep adding more sample copy here.</p>
   </div>
</div>

Nested Scrollspy

Scrollspy also works with nested .navs if a nested .nav is .active, it's parents will also be .active. Scroll the area next to the navbar and watch the active class change.

Experience

This content is a stand-in for the scrollspy page. You'll notice that the relevant navigation link is highlighted as you scroll down the page. It appears again in the component example. Here, we'll continue to add sample copy to highlight the scrolling and highlighting.

Experience / Web Development

This is some stuff that is meant to be on the scrollspy page. Keep in mind that the relevant navigation link is highlighted as you scroll down the page. The component example uses it repeatedly. Here, we continue to add sample copy to highlight the scrolling and highlighting.

Experience / Cyber Security

For the scrollspy page, this is some placeholder content. Take note of the highlighted navigation link at the bottom of the page as you scroll down. It appears again and again in the component example. To highlight the scrolling and highlighting, we're going to keep adding more sample copy here.

Get in Touch

The content that appears here is a placeholder for the scrollspy page. The relevant navigation link is highlighted as you scroll down the page. The component example contains repetitions of it. In order to highlight the scrolling and highlighting, we will continue to add more sample copy here.

Projects

This content is a stand-in for the scrollspy page. You'll notice that the relevant navigation link is highlighted as you scroll down the page. It appears again in the component example. Here, we'll continue to add sample copy to highlight the scrolling and highlighting.

Projects / Group Projects

This content is a stand-in for the scrollspy page. You'll notice that the relevant navigation link is highlighted as you scroll down the page. It appears again in the component example. Here, we'll continue to add sample copy to highlight the scrolling and highlighting.

Projects / Individual Projects

For the scrollspy page, this is some placeholder content. Take note of the highlighted navigation link at the bottom of the page as you scroll down. It appears again and again in the component example. To highlight the scrolling and highlighting, we're going to keep adding more sample copy here.

<div class="card-body nested-scrollspy">
   <div class="row g-4">
       <div class="col-xl-3 col-lg-4 col-md-5 xl-40 box-col-4e">
           <nav class="h-100 nested-scrollspy-menu flex-column align-items-stretch" id="navbar-scrollspy2">
               <nav class="nav nav-pills flex-column"><a class="nav-link f-16 txt-dark" href="#item-1">Experience</a>
                   <nav class="nav nav-pills flex-column"><a class="nav-link ms-3 my-1" href="#item-1-1">Web Development </a><a class="nav-link ms-3 my-1" href="#item-1-2">Cyber Security</a></nav><a class="nav-link f-16 txt-dark" href="#item-2">Get in Touch</a><a class="nav-link f-16 txt-dark" href="#item-3">Projects</a>
                   <nav class="nav nav-pills flex-column"><a class="nav-link ms-3 my-1" href="#item-3-1">Group Projects</a><a class="nav-link ms-3 my-1" href="#item-3-2">Individual Projects</a></nav>
               </nav>
           </nav>
       </div>
       <div class="col-xl-9 col-lg-8 col-md-7 xl-60 box-col-8">
           <div class="scrollspy-example-2 custom-scrollbar" data-bs-spy="scroll" data-bs-target="#navbar-scrollspy2" data-bs-smooth-scroll="true" tabindex="0">
               <div id="item-1">
                   <h6 class="f-18">Experience</h6>
                   <div class="common-align gap-lg-3 gap-1">
                       <div class="flex-shrink-0">
                           <svg>
                               <use href="../assets/svg/icon-sprite.svg#experience-scrollspy"></use>
                           </svg>
                       </div>
                       <div class="flex-grow-1">
                           <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
                       </div>
                   </div>
               </div>
               <div id="item-1-1">
                   <h6> Experience / Web Development </h6>
                   <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues. Try out several setups and see how the clear navigation signals that scrollspy offers improves user experience. On the other hand, you should be cautious when working with intricate layouts or scrollspy targets that overlap. Although the plugin makes an effort to choose the most pertinent aspect, there may occasionally be conflicts when there are several targets vying for the plugin's attention at once. You may take full advantage of scrollspy and improve the usability of your online application by anticipating problems and streamlining your page structure.</p>
               </div>
               <div id="item-1-2">
                   <h6> Experience / Cyber Security</h6>
                   <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues. It's important to remember that even while the JavaScript plugin uses visibility to determine which element is most relevant, having numerous scrollspy targets visible at once may cause confusion or unexpected behavior. In order to maximize usability and prevent any potential problems, it is therefore advised that you carefully organize your information when using scrollspy, making sure that sections are clearly distinguished from one another.</p>
                   <p>In summary, Scrollspy is an effective solution that improves user engagement and navigation, giving visitors to your website a smooth surfing experience. You may improve the usability and interactivity of your web pages and make them easier to navigate by making proper use of its capabilities.</p>
               </div>
               <div id="item-2">
                   <h6 class="f-18">Get in Touch</h6>
                   <div class="common-align gap-lg-3 gap-1">
                       <div class="flex-shrink-0">
                           <svg>
                               <use href="../assets/svg/icon-sprite.svg#contact-us"></use>
                           </svg>
                       </div>
                       <div class="flex-grow-1">
                           <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues. When using scrollspy, it's important to remember best practices, particularly with regard to the arrangement and labelling of your page elements. The combination of well-placed scrollable targets and comprehensible HTML code guarantees optimal functionality and accessibility for all users.</p>
                           <p>In summary, Scrollspy is an effective solution that improves user engagement and navigation, giving visitors to your website a smooth surfing experience. You may improve the usability and interactivity of your web pages and make them easier to navigate by making proper use of its capabilities.</p>
                       </div>
                   </div>
               </div>
               <div id="item-3">
                   <h6 class="f-18">Projects</h6>
                   <div class="common-align gap-lg-3 gap-1">
                       <div class="flex-shrink-0">
                           <svg>
                               <use href="../assets/svg/icon-sprite.svg#project-info"></use>
                           </svg>
                       </div>
                       <div class="flex-grow-1">
                           <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
                       </div>
                   </div>
               </div>
               <div id="item-3-1">
                   <h6>Projects / Group Projects</h6>
                   <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues. When using scrollspy, it's important to remember best practices, particularly with regard to the arrangement and labelling of your page elements. The combination of well-placed scrollable targets and comprehensible HTML code guarantees optimal functionality and accessibility for all users.</p>
                   <p>In summary, Scrollspy is an effective solution that improves user engagement and navigation, giving visitors to your website a smooth surfing experience. You may improve the usability and interactivity of your web pages and make them easier to navigate by making proper use of its capabilities.</p>
               </div>
               <div id="item-3-2">
                   <h6>Projects / Individual Projects</h6>
                   <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues. When using scrollspy, it's important to remember best practices, particularly with regard to the arrangement and labelling of your page elements. The combination of well-placed scrollable targets and comprehensible HTML code guarantees optimal functionality and accessibility for all users.</p>
                   <p class="mb-0">In summary, Scrollspy is an effective solution that improves user engagement and navigation, giving visitors to your website a smooth surfing experience. You may improve the usability and interactivity of your web pages and make them easier to navigate by making proper use of its capabilities.</p>
               </div>
           </div>
       </div>
   </div>
</div>

List Group Scrollspy

Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active class change.

Item 1

This content is a stand-in for the scrollspy page. You'll notice that the relevant navigation link is highlighted as you scroll down the page. It appears again in the component example. Here, we'll continue to add sample copy to highlight the scrolling and highlighting.

Item 2

For the scrollspy page, this is some placeholder content. Take note of the highlighted navigation link at the bottom of the page as you scroll down. It appears again and again in the component example. To highlight the scrolling and highlighting, we're going to keep adding more sample copy here.

Item 3

The content that appears here is a placeholder for the scrollspy page. The relevant navigation link is highlighted as you scroll down the page. The component example contains repetitions of it. In order to highlight the scrolling and highlighting, we will continue to add more sample copy here.

Item 4

The content that appears here is a placeholder for the scrollspy page. The relevant navigation link is highlighted as you scroll down the page. The component example contains repetitions of it. In order to highlight the scrolling and highlighting, we will continue to add more sample copy here.

<div class="row gap-sm-0 gap-3">
   <div class="col-sm-4">
       <div class="list-group" id="list-example"><a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a><a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a><a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a><a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a></div>
   </div>
   <div class="col-sm-8">
       <div class="scrollspy-example-3 custom-scrollbar" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" tabindex="0">
           <h6 id="list-item-1">Item 1</h6>
           <p>This content is a stand-in for the scrollspy page. You'll notice that the relevant navigation link is highlighted as you scroll down the page. It appears again in the component example. Here, we'll continue to add sample copy to highlight the scrolling and highlighting.Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
           <h6 id="list-item-2">Item 2</h6>
           <p>For the scrollspy page, this is some placeholder content. Take note of the highlighted navigation link at the bottom of the page as you scroll down. It appears again and again in the component example. To highlight the scrolling and highlighting, we're going to keep adding more sample copy here.Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
           <h6 id="list-item-3">Item 3</h6>
           <p>The content that appears here is a placeholder for the scrollspy page. The relevant navigation link is highlighted as you scroll down the page. The component example contains repetitions of it. In order to highlight the scrolling and highlighting, we will continue to add more sample copy here.Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
           <h6 id="list-item-4">Item 4</h6>
           <p>The content that appears here is a placeholder for the scrollspy page. The relevant navigation link is highlighted as you scroll down the page. The component example contains repetitions of it. In order to highlight the scrolling and highlighting, we will continue to add more sample copy here.Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
       </div>
   </div>
</div>

Custom Scrollspy

add data-bs-spy="scroll" and data-bs-target="#navId" where navId is the unique id of the associated navigation.

Home
This content is a stand-in for the scrollspy page. You'll notice that the relevant navigation link is highlighted as you scroll down the page. It appears again in the component example. Here, we'll continue to add sample copy to highlight the scrolling and highlighting.Remember that the JavaScript plugin selects the appropriate element from among those that might be displayed. There could be some problems if there are several scrollspy targets showing at once.
About Me
user

My name is Lichi Wallien is. I have four years of experience as a software engineer and finished my BE in 2022. I developed PHP and MySQL when I worked for Lavender, and I believe those skills will be useful in this position.

Read more
Projects
Websites for E-Commerce
Created a comprehensive e-commerce platform with the goal of improving the online purchasing experience. The project's goals were to offer a smooth navigation system, a user-friendly interface, and strong functionality to accommodate a wide variety of products.
89/100
+80%
Robotics Sensor
Lidar sensor array was put into use for obstacle identification and real-time mapping. With the use of this data, the rover creates an extensive picture of its environment that helps it safely traverse difficult terrain.
95/100
+97%
Watch Application
Keeps an eye on key health indicators like heart rate, steps taken, calories burnt, and sleep habits. makes use of cutting-edge algorithms to deliver precise and useful health insights.
92/100
+94%
Experience
Wordpress
85%
PHP
60%
MYSQL
30%
<div class="row gap-xl-0 gap-4">
 <div class="col-xxl-2 col-xl-3">
   <nav class="h-100 flex-column align-items-stretch pe-4" id="navbar-scrollspy4">
     <nav class="nav nav-pills flex-column"> <a class="nav-link" href="#home1">Home 
         <div class="custom-arrow"></div></a><a class="nav-link" href="#about-me">About Me
         <div class="custom-arrow"></div></a><a class="nav-link" href="#project1">Projects 
         <div class="custom-arrow"></div></a><a class="nav-link" href="#experience1">Experiences
         <div class="custom-arrow"></div></a></nav>
   </nav>
 </div>
 <div class="col-xxl-10 col-xl-9">
   <div class="scrollspy-example-5 custom-scrollbar" data-bs-spy="scroll" data-bs-target="#navbar-scrollspy4" data-bs-smooth-scroll="true" tabindex="0">
     <div id="home1">
       <h6>Home</h6>
       <div class="common-align gap-3 align-items-lg-start">
         <div class="flex-shrink-0"><img class="img-fluid" src="../assets/images/banner/2.jpg" alt=""></div>
         <div class="flex-grow-1"><span>This content is a stand-in for the scrollspy page. You'll notice that the relevant navigation link is highlighted as you scroll down the page. It appears again in the component example. Here, we'll continue to add sample copy to highlight the scrolling and highlighting.Remember that the JavaScript plugin selects the appropriate element from among those that might be displayed. There could be some problems if there are several scrollspy targets showing at once.Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</span></div>
       </div>
     </div>
     <div class="common-p-space" id="about-me">
       <h6>About Me</h6>
       <div class="about-box common-align gap-3"><img class="img-fluid" src="../assets/images/avtar/11.jpg" alt="user">
         <div>
           <p>My name is Lichi Wallien is. I have four years of experience as a software engineer and finished my BE in 2022. I developed PHP and MySQL when I worked for Lavender, and I believe those skills will be useful in this position.</p><a class="btn btn-primary" href="#!">Read more<span class="ms-1">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#arrowright"></use>
               </svg></span></a>
         </div>
       </div>
     </div>
     <div class="common-p-space" id="project1">
       <h6>Projects</h6>
       <div class="row g-3 main-project">
         <div class="col-xl-12"> 
           <div class="light-card attendance-card">
             <div class="left-overview-content">
               <div class="svg-box">
                 <svg> 
                   <use href="../assets/svg/icon-sprite.svg#e-commerce-cart"></use>
                 </svg>
               </div>
             </div>
             <div class="right-overview-content">
               <div> 
                 <h6>Websites for E-Commerce</h6><span class="text-muted text-ellipsis">Created a comprehensive e-commerce platform with the goal of improving the online purchasing experience. The project's goals were to offer a smooth navigation system, a user-friendly interface, and strong functionality to accommodate a wide variety of products.</span>
               </div>
               <div class="d-flex marks-count">
                 <h5>89/<sub class="text-muted">100</sub></h5>
                 <div class="d-flex justify-content-center align-items-center"><i class="icon-arrow-up txt-success pe-2 f-w-600"></i><span class="txt-success f-w-500">+80%</span></div>
               </div>
             </div>
           </div>
         </div>
         <div class="col-xl-12"> 
           <div class="light-card attendance-card">
             <div class="left-overview-content">
               <div class="svg-box">
                 <svg> 
                   <use href="../assets/svg/icon-sprite.svg#robotics-project"></use>
                 </svg>
               </div>
             </div>
             <div class="right-overview-content">
               <div> 
                 <h6>Robotics Sensor</h6><span class="text-muted text-ellipsis">Lidar sensor array was put into use for obstacle identification and real-time mapping. With the use of this data, the rover creates an extensive picture of its environment that helps it safely traverse difficult terrain.</span>
               </div>
               <div class="d-flex marks-count">
                 <h5>95/<sub class="text-muted">100</sub></h5>
                 <div class="d-flex justify-content-center align-items-center"><i class="icon-arrow-up txt-success pe-2 f-w-600"></i><span class="txt-success f-w-500">+97%</span></div>
               </div>
             </div>
           </div>
         </div>
         <div class="col-xl-12"> 
           <div class="light-card attendance-card">
             <div class="left-overview-content">
               <div class="svg-box">
                 <svg> 
                   <use href="../assets/svg/icon-sprite.svg#watch-app"></use>
                 </svg>
               </div>
             </div>
             <div class="right-overview-content">
               <div> 
                 <h6>Watch Application</h6><span class="text-muted text-ellipsis">Keeps an eye on key health indicators like heart rate, steps taken, calories burnt, and sleep habits. makes use of cutting-edge algorithms to deliver precise and useful health insights.</span>
               </div>
               <div class="d-flex marks-count">
                 <h5>92/<sub class="text-muted">100</sub></h5>
                 <div class="d-flex justify-content-center align-items-center"><i class="icon-arrow-up txt-success pe-2 f-w-600"></i><span class="txt-success f-w-500">+94%</span></div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div class="common-p-space" id="experience1">
       <h6>Experience</h6>
       <div class="row">
         <div class="col experience-section">
           <p class="mb-2">Wordpress</p>
           <div class="progress">
             <div class="progress-bar text-center" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">50%</div>
           </div>
           <p class="mb-2">PHP</p>
           <div class="progress">
             <div class="progress-bar text-center" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">30%</div>
           </div>
           <p class="mb-2">MYSQL</p>
           <div class="progress">
             <div class="progress-bar text-center" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">60%</div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>