Sometimes while designing the website, we include some attractive features which makes website eye-catching. One of the features is Bootstrap scrollspy which target the navigation bar contents automatically on scrolling the area.
Create scrollspy: The data-spy="scroll" and data-target=".navbar" attribute is used to create scrollspy element. The scrollspy is used to update the navigation links when scrolling the page.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks - Learning Portal</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.5.2/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
padding-top: 56px;
}
.section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.navbar-nav .nav-link {
transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover {
color: #ffc107 !important;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#content1">GeeksforGeeks</a>
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#content1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content2">Algorithms</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content3">Data Structures</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>
</div>
</nav>
<div id="content1" class="section bg-primary text-white">
<div class="container">
<h1 class="display-4">Welcome to GeeksforGeeks</h1>
<p class="lead">A computer science portal for geeks</p>
<a href="#content2" class="btn btn-light btn-lg mt-3">Get Started</a>
</div>
</div>
<div id="content2" class="section bg-light">
<div class="container">
<h2 class="mb-4">Algorithm Analysis</h2>
<p class="lead">A stepwise procedure to solve a problem</p>
<div class="row mt-4">
<div class="col-md-4">
<h4>Time Complexity</h4>
<p>Learn about Big O notation and algorithm efficiency.</p>
</div>
<div class="col-md-4">
<h4>Space Complexity</h4>
<p>Understand memory usage in algorithms.</p>
</div>
<div class="col-md-4">
<h4>Optimization</h4>
<p>Techniques to improve algorithm performance.</p>
</div>
</div>
</div>
</div>
<div id="content3" class="section bg-warning">
<div class="container">
<h2 class="mb-4">Data Structures</h2>
<p class="lead">Efficient ways of organizing data in computer memory</p>
<div class="row mt-4">
<div class="col-md-3">
<h4>Arrays</h4>
</div>
<div class="col-md-3">
<h4>Linked Lists</h4>
</div>
<div class="col-md-3">
<h4>Trees</h4>
</div>
<div class="col-md-3">
<h4>Graphs</h4>
</div>
</div>
</div>
</div>
<div id="content4" class="section bg-info text-white">
<div class="container">
<h2 class="mb-4">C Language</h2>
<p class="lead">A powerful and widely-used programming language</p>
<ul class="list-unstyled">
<li>Procedural programming</li>
<li>Low-level memory access</li>
<li>Efficient and portable</li>
</ul>
</div>
</div>
<div id="content5" class="section bg-dark text-white">
<div class="container">
<h2 class="mb-4">C++ Language</h2>
<p class="lead">An extension of C with object-oriented features</p>
<ul class="list-unstyled">
<li>Object-oriented programming</li>
<li>Standard Template Library (STL)</li>
<li>Cross-platform development</li>
</ul>
</div>
</div>
<footer class="bg-secondary text-white text-center py-3">
<p>© 2024 GeeksforGeeks. All rights reserved.</p>
</footer>
</body>
</html>
Output:
Scrollspy Vertical Menu: It creates vertical navigation menu and the content are display according to the menu.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Enhanced Scrollspy</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body {
position: relative;
padding-top: 60px;
}
#GFG_scrollspy {
top: 60px;
position: sticky;
}
.section {
min-height: 500px;
padding-top: 80px;
}
.navbar-brand {
font-weight: bold;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target="#GFG_scrollspy" data-bs-offset="60">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">GeeksforGeeks</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<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="#" role="button"
data-bs-toggle="dropdown">
Languages
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#content4">C</a></li>
<li><a class="dropdown-item" href="#content5">C++</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-lg-2" id="GFG_scrollspy">
<ul class="nav nav-pills flex-column">
<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"
data-bs-toggle="dropdown"
href="#" role="button">
Languages
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#content4">C</a></li>
<li><a class="dropdown-item" href="#content5">C++</a></li>
</ul>
</li>
</ul>
</nav>
<div class="col-sm-9 col-lg-10">
<div id="content1" class="section bg-primary text-white">
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</div>
<div id="content2" class="section bg-light">
<h1>Algorithm Analysis</h1>
<p>A stepwise procedure to solve a problem</p>
</div>
<div id="content3" class="section bg-warning">
<h1>Data Structure</h1>
<p>
Data structure is a particular way of organizing
data in computer memory so that it can be used
efficiently.</p>
</div>
<div id="content4" class="section bg-info">
<h1>C Language</h1>
<p>C is a computer science programming language</p>
</div>
<div id="content5" class="section bg-secondary text-white">
<h1>C++ Language</h1>
<p>C++ is the extension of C language.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari