bootstrap 5 sticky navbar and scrollspy example
Anna
Created Nov 02, 2025
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.js"></script>
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="100">
<!-- Progress Indicator -->
<div class="progress-indicator" id="progressBar"></div>
<!-- Sticky Navbar -->
<nav class="navbar navbar-expand-lg navbar-sticky" id="navbar">
<div class="container">
<a class="navbar-brand" href="#home">
<ion-icon name="rocket"></ion-icon>
BrandName
</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="#home">
<ion-icon name="home"></ion-icon>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">
<ion-icon name="information-circle"></ion-icon>
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">
<ion-icon name="briefcase"></ion-icon>
Services
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">
<ion-icon name="grid"></ion-icon>
Portfolio
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">
<ion-icon name="people"></ion-icon>
Team
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">
<ion-icon name="mail"></ion-icon>
Contact
</a>
</li>
</ul>
<button class="navbar-cta ms-lg-3">
<ion-icon name="call"></ion-icon>
Get Started
</button>
</div>
</div>
</nav>
<!-- Home Section -->
<section id="home">
<div class="container">
<div class="section-content animate-on-scroll">
<div class="section-icon">
<ion-icon name="home"></ion-icon>
</div>
<h1 class="section-title">Welcome Home</h1>
<p class="section-description">
Experience seamless navigation with our sticky navbar and smooth scrollspy functionality.
Scroll down to explore different sections and watch the active menu item change automatically.
</p>
</div>
</div>
</section>
<!-- About Section -->
<section id="about">
<div class="container">
<div class="section-content">
<div class="section-icon">
<ion-icon name="information-circle"></ion-icon>
</div>
<h2 class="section-title">About Us</h2>
<p class="section-description">
We're passionate about creating exceptional digital experiences. Our team combines creativity,
technical expertise, and strategic thinking to deliver outstanding results for our clients.
</p>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-number" style="color: #ff4b2b;">500+</div>
<div class="stat-label" style="color: #7f8c8d;">Projects Completed</div>
</div>
<div class="stat-item">
<div class="stat-number" style="color: #ff4b2b;">50+</div>
<div class="stat-label" style="color: #7f8c8d;">Team Members</div>
</div>
<div class="stat-item">
<div class="stat-number" style="color: #ff4b2b;">98%</div>
<div class="stat-label" style="color: #7f8c8d;">Client Satisfaction</div>
</div>
<div class="stat-item">
<div class="stat-number" style="color: #ff4b2b;">15+</div>
<div class="stat-label" style="color: #7f8c8d;">Years Experience</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services">
<div class="container">
<div class="section-content">
<div class="section-icon">
<ion-icon name="briefcase"></ion-icon>
</div>
<h2 class="section-title">Our Services</h2>
<p class="section-description">
We offer comprehensive digital solutions tailored to meet your unique business needs.
</p>
<div class="feature-cards">
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="code-slash"></ion-icon>
</div>
<h3 class="feature-title">Web Development</h3>
<p class="feature-description">
Build responsive, fast, and scalable websites using modern technologies and best practices.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="color-palette"></ion-icon>
</div>
<h3 class="feature-title">UI/UX Design</h3>
<p class="feature-description">
Create beautiful, intuitive interfaces that provide exceptional user experiences.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="megaphone"></ion-icon>
</div>
<h3 class="feature-title">Digital Marketing</h3>
<p class="feature-description">
Grow your brand with data-driven marketing strategies and campaigns.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio">
<div class="container">
<div class="section-content">
<div class="section-icon">
<ion-icon name="grid"></ion-icon>
</div>
<h2 class="section-title">Our Portfolio</h2>
<p class="section-description">
Explore our latest projects and see how we've helped businesses achieve their digital goals.
Each project represents our commitment to excellence and innovation.
</p>
<div class="stats-grid" style="margin-top: 50px;">
<div class="stat-item">
<ion-icon name="rocket" style="font-size: 3rem; color: #ff4b2b; margin-bottom: 15px;"></ion-icon>
<div class="stat-label" style="color: #7f8c8d;">Innovative Solutions</div>
</div>
<div class="stat-item">
<ion-icon name="shield-checkmark" style="font-size: 3rem; color: #ff4b2b; margin-bottom: 15px;"></ion-icon>
<div class="stat-label" style="color: #7f8c8d;">Secure & Reliable</div>
</div>
<div class="stat-item">
<ion-icon name="speedometer" style="font-size: 3rem; color: #ff4b2b; margin-bottom: 15px;"></ion-icon>
<div class="stat-label" style="color: #7f8c8d;">High Performance</div>
</div>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section id="team">
<div class="container">
<div class="section-content">
<div class="section-icon">
<ion-icon name="people"></ion-icon>
</div>
<h2 class="section-title">Meet Our Team</h2>
<p class="section-description">
Behind every successful project is a dedicated team of professionals who are passionate
about what they do. Get to know the people who make it all happen.
</p>
<div class="feature-cards">
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="person"></ion-icon>
</div>
<h3 class="feature-title">Leadership</h3>
<p class="feature-description">
Experienced leaders guiding our vision and strategy.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="bulb"></ion-icon>
</div>
<h3 class="feature-title">Innovation</h3>
<p class="feature-description">
Creative minds constantly pushing boundaries.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="heart"></ion-icon>
</div>
<h3 class="feature-title">Dedication</h3>
<p class="feature-description">
Committed professionals delivering excellence.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="section-content">
<div class="section-icon">
<ion-icon name="mail"></ion-icon>
</div>
<h2 class="section-title">Get In Touch</h2>
<p class="section-description">
Ready to start your next project? We'd love to hear from you. Contact us today and let's
discuss how we can help bring your vision to life.
</p>
<button class="navbar-cta" style="margin-top: 30px; font-size: 1.1rem; padding: 15px 40px;">
<ion-icon name="send"></ion-icon>
Contact Us Now
</button>
</div>
</div>
</section>
<!-- Scroll to Top Button -->
<div class="scroll-to-top" id="scrollToTop" onclick="scrollToTop()">
<ion-icon name="chevron-up"></ion-icon>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
* {
font-family: 'Roboto', sans-serif;
scroll-behavior: smooth;
}
body {
position: relative;
margin: 0;
padding: 0;
}
/* Sticky Navbar */
.navbar-sticky {
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 15px 0;
transition: all 0.3s ease;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar-sticky.scrolled {
padding: 10px 0;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}
.navbar-brand {
font-size: 1.8rem;
font-weight: 900;
background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
-webkit-background-clip: text;
background-clip: text;
display: flex;
align-items: center;
gap: 10px;
}
.navbar-brand ion-icon {
font-size: 32px;
color: #ff4b2b;
}
.navbar-nav {
gap: 10px;
}
.nav-link {
color: #2c3e50;
font-weight: 500;
padding: 10px 20px;
border-radius: 50px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.nav-link ion-icon {
font-size: 20px;
}
.nav-link:hover {
background: rgba(255, 75, 43, 0.1);
color: #ff4b2b;
transform: translateY(-2px);
}
.nav-link.active {
background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
color: white;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 3px;
background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 60%;
}
.nav-link.active::after {
width: 0;
}
.navbar-cta {
background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
color: white;
padding: 10px 25px;
border-radius: 50px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.navbar-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 65, 108, 0.4);
}
/* Scroll to Top Button */
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
color: white;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
box-shadow: 0 5px 20px rgba(255, 65, 108, 0.4);
transition: all 0.3s ease;
z-index: 999;
}
.scroll-to-top.show {
display: flex;
}
.scroll-to-top:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(255, 65, 108, 0.6);
}
/* Sections */
section {
min-height: 100vh;
padding: 100px 0;
display: flex;
align-items: center;
justify-content: center;
}
#home {
background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
color: white;
}
#about {
background: #f8f9fa;
}
#services {
background: white;
}
#portfolio {
background: #f8f9fa;
}
#team {
background: white;
}
#contact {
background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
color: white;
}
.section-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.section-icon {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
margin: 0 auto 30px;
}
#about .section-icon,
#services .section-icon,
#portfolio .section-icon,
#team .section-icon {
background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
color: white;
}
.section-title {
font-size: 3rem;
font-weight: 900;
margin-bottom: 20px;
}
.section-description {
font-size: 1.2rem;
line-height: 1.8;
opacity: 0.95;
}
#about .section-title,
#services .section-title,
#portfolio .section-title,
#team .section-title {
color: #2c3e50;
}
#about .section-description,
#services .section-description,
#portfolio .section-description,
#team .section-description {
color: #7f8c8d;
}
/* Cards */
.feature-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.feature-card {
background: white;
padding: 40px 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}
.feature-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: white;
margin: 0 auto 20px;
}
.feature-title {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
}
.feature-description {
color: #7f8c8d;
line-height: 1.8;
}
/* Stats */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 50px;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 3.5rem;
font-weight: 900;
margin-bottom: 10px;
}
.stat-label {
font-size: 1.1rem;
opacity: 0.9;
}
/* Progress Indicator */
.progress-indicator {
position: fixed;
top: 0;
left: 0;
height: 4px;
background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
z-index: 9999;
transition: width 0.1s ease;
}
/* Responsive */
@media (max-width: 991px) {
.navbar-nav {
background: white;
padding: 20px;
border-radius: 15px;
margin-top: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.nav-link {
margin: 5px 0;
}
.navbar-cta {
margin-top: 15px;
width: 100%;
justify-content: center;
}
}
@media (max-width: 768px) {
.section-title {
font-size: 2rem;
}
.section-description {
font-size: 1rem;
}
section {
padding: 80px 20px;
}
.scroll-to-top {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
}
}
/* Loading Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-on-scroll {
animation: fadeInUp 0.8s ease;
}
// Navbar scroll effect
const navbar = document.getElementById('navbar');
const scrollToTopBtn = document.getElementById('scrollToTop');
const progressBar = document.getElementById('progressBar');
window.addEventListener('scroll', () => {
// Navbar effect
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
// Scroll to top button
if (window.scrollY > 300) {
scrollToTopBtn.classList.add('show');
} else {
scrollToTopBtn.classList.remove('show');
}
// Progress bar
const windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (window.scrollY / windowHeight) * 100;
progressBar.style.width = scrolled + '%';
});
// Scroll to top function
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// Smooth scroll for nav links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
// Close mobile menu if open
const navbarCollapse = document.querySelector('.navbar-collapse');
if (navbarCollapse.classList.contains('show')) {
const bsCollapse = new bootstrap.Collapse(navbarCollapse);
bsCollapse.hide();
}
}
});
});
// Initialize ScrollSpy
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar',
offset: 100
});
Comments (0)
Login to leave a comment
Login
No comments yet. Be the first!