Prev

Sticky Elements: Using sticky-top for Fixed Headers, Footers, or Other Components

The sticky-top utility class in Bootstrap 5 allows you to make elements stick to the top of the viewport as you scroll. This is particularly useful for fixed headers, navigation bars, or important UI elements that should remain visible.

Key Topics

Basic Sticky Element

Use the sticky-top class to make an element stick to the top of the viewport when scrolling.

<div class="sticky-top bg-light border">
    This is a sticky element.
</div>
<div style="height: 2000px;">
    Scroll down to see the sticky behavior.
</div>

Explanation: The sticky-top class ensures the element remains visible at the top of the viewport while scrolling.

Create a sticky navigation bar by applying the sticky-top class to the navbar container.

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Sticky Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div style="height: 2000px;">
    Scroll down to see the sticky navbar in action.
</div>

Explanation: The sticky-top class keeps the navbar fixed at the top of the viewport during scrolling.

Custom Styling for Sticky Elements

Customize the appearance of sticky elements using additional utility classes or custom CSS.

.custom-sticky {
    background-color: #f8f9fa;
    padding: 10px;
    border-bottom: 2px solid #0d6efd;
}
<div class="sticky-top custom-sticky">
    Customized Sticky Element
</div>
<div style="height: 2000px;">
    Scroll to see the custom sticky element in action.
</div>

Explanation: Custom CSS allows you to modify the sticky element's colors, padding, and other styles for better visual design.

Complete Sticky Element Example

The following example demonstrates a complete sticky header and sticky navbar with custom styles.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Sticky Elements</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .custom-sticky {
            background-color: #f8f9fa;
            padding: 10px;
            border-bottom: 2px solid #0d6efd;
        }
    </style>
</head>
<body>
    <div class="sticky-top custom-sticky">
        Sticky Header with Custom Styles
    </div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Sticky Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div style="height: 2000px;">
        Scroll to see the sticky elements in action.
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example includes a sticky header and a sticky navbar with custom styles, showcasing the flexibility of the sticky-top class.

Key Takeaways

  • Use the sticky-top class to create sticky elements that remain visible at the top of the viewport.
  • Combine sticky elements with custom styles for better visual appeal.
  • Ensure proper placement and padding to avoid overlapping with other components.
  • Sticky elements are ideal for headers, navigation bars, or important messages.
Prev