Bootstrap 5 Sticky Elements

Creating fixed and sticky positioned elements

📌 What are Sticky Elements?

Sticky elements remain visible while scrolling, staying fixed at a specific position. Bootstrap 5 provides utility classes to create sticky navigation bars, headers, and sidebars that enhance user experience and accessibility. 


<!-- Basic Sticky Top Element -->
<div class="sticky-top bg-primary text-white p-3">
    I stick to the top!
</div>

Sticky Position Types

⬆️

Sticky Top

Sticks to top when scrolling

Navbar Header Menu
⬇️

Sticky Bottom

Sticks to bottom of viewport

Footer Actions Toolbar
🔒

Fixed Position

Always stays in place

Fixed-top Fixed-bottom Overlay
📱

Responsive

Breakpoint-specific sticky

sm md lg

🔹 Sticky Top

The .sticky-top utility class uses CSS position: sticky to make an element adhere to the top of the viewport once scrolled past. It's commonly applied to navigation bars, table headers, or call-to-action buttons to keep them always accessible. This dramatically improves usability on long pages by providing constant access to key navigation or tools. For SEO, a sticky navbar can encourage deeper site exploration by making internal links always available, potentially increasing page views per session. However, ensure the sticky element is not too tall on mobile, as it can consume valuable screen space and negatively impact the mobile user experience if not implemented responsively. 

<!-- Sticky Top Navigation -->
<nav class="sticky-top bg-dark text-white p-3">
    <div class="container">
        <h4>Sticky Navigation</h4>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link text-white" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container">
    <p>Scroll down to see the sticky effect...</p>
</div>

Output:

Sticky Navigation
This would stick to top when scrolling

🔹 Fixed Top and Bottom

Content in the middle of a fixed top and bottom layout is crucial for maintaining balanced visual hierarchy and usability. This sandwiched design ensures primary information scrolls naturally while static elements frame the viewport. It is commonly used in admin dashboards, web applications, and modern websites to present dynamic data between persistent navigation and footer areas. The middle section benefits from maximum focus, allowing users to absorb content without competing with moving headers or footers. This layout promotes cleaner design, reduces visual clutter, and supports better content organization across devices. 

<!-- Fixed Top -->
<nav class="fixed-top bg-primary text-white p-3">
    <div class="container">
        Fixed Top Navigation
    </div>
</nav>

<!-- Add padding to body to prevent content overlap -->
<body style="padding-top: 70px;">
    <div class="container">
        <h1>Page Content</h1>
        <p>Your content here...</p>
    </div>
</body>

<!-- Fixed Bottom -->
<footer class="fixed-bottom bg-dark text-white p-3">
    <div class="container text-center">
        Fixed Bottom Footer
    </div>
</footer>

Output:

Fixed Top Navigation
Page Content

Content in the middle

Fixed Bottom Footer

🔹 Responsive Sticky

Responsive sticky positioning adapts element behavior based on screen size using CSS media queries. This technique allows components like sidebars, menus, or ads to become sticky only on tablets or desktops while remaining static on mobile. By implementing conditional `position: sticky` rules within breakpoints, you enhance usability without compromising mobile performance. This is perfect for multi-device compatibility, ensuring optimal layout behavior whether viewed on phones, tablets, or large monitors. It improves navigation efficiency on larger screens while maintaining scroll simplicity on smaller ones. 

<!-- Sticky only on medium screens and up -->
<div class="sticky-md-top bg-info text-white p-3">
    Sticky on medium screens and larger
</div>

<!-- Sticky only on large screens and up -->
<div class="sticky-lg-top bg-success text-white p-3">
    Sticky on large screens and larger
</div>

<!-- Available breakpoints -->
<!-- sticky-sm-top -->
<!-- sticky-md-top -->
<!-- sticky-lg-top -->
<!-- sticky-xl-top -->
<!-- sticky-xxl-top -->

Output:

Sticky on medium screens and larger
Sticky on large screens and larger

🔹 Sticky Sidebar Example

Long scrolling content paired with a sticky sidebar creates an intuitive, user-friendly reading and navigation experience. As users scroll through articles, product listings, or tutorials, the sidebar remains anchored, offering quick jumps to sections, filters, or actions. This design pattern reduces bounce rates and increases time-on-page by making navigation effortless. Implementing this requires careful planning of layout structure, z-index management, and responsive breakpoints to ensure the sidebar enhances rather than obstructs content across all device types and screen orientations. 

<div class="container">
    <div class="row">
        <!-- Sticky Sidebar -->
        <div class="col-md-3">
            <div class="sticky-top" style="top: 20px;">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Sidebar</h5>
                        <ul class="list-unstyled">
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-md-9">
            <h2>Main Content</h2>
            <p>Long content that scrolls...</p>
        </div>
    </div>
</div>

Output:

Main Content

Long content that scrolls...

🔹 Complete Sticky Example

A full-page layout with both sticky header and footer provides a framed, immersive interface that maximizes usability. The header typically holds logos, primary navigation, and search, while the footer contains links, copyright, and contact details. This dual-sticky approach ensures critical UI elements are always present, improving site reliability and user orientation. It is especially effective for web apps, dashboards, and content-heavy sites where consistent access to navigation and information is key. Careful CSS ensures headers and footers do not overlap content or cause unwanted scrolling issues. 

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { padding-top: 70px; padding-bottom: 70px; }
        .content { min-height: 1000px; }
    </style>
</head>
<body>
    <!-- Sticky Header -->
    <header class="fixed-top bg-primary text-white p-3">
        <div class="container">
            <h4>My Website</h4>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container content">
        <h1>Welcome</h1>
        <p>Scroll to see sticky elements in action...</p>
    </main>

    <!-- Sticky Footer -->
    <footer class="fixed-bottom bg-dark text-white p-3">
        <div class="container text-center">
            <p class="mb-0">© 2025 My Website</p>
        </div>
    </footer>
</body>
</html>

💡 Best Practices:

  • Add padding to body when using fixed-top to prevent content overlap
  • Use sticky-top for navigation that should appear after scrolling
  • Consider mobile experience - sticky elements take up screen space
  • Use z-index if sticky elements overlap other content
  • Test sticky behavior across different screen sizes

🧠 Test Your Knowledge

Which class makes an element stick to the top when scrolling?