Bootstrap Affix

21 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Sticky Navigation (Affix Alternative)

In this Bootstrap tutorial, you’ll learn how to create a sticky navigation bar that stays fixed while scrolling, mimicking Bootstrap 3’s Affix plugin, using Bootstrap 5’s position-sticky utility. We’ll pair it with images for a vibrant look.

What You’ll Learn

Creating a basic sticky navigation
Using sticky positioning with a sidebar
Adding offsets for visibility
Combining sticky nav with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Sticky Navigation

Bootstrap 3’s Affix plugin pinned elements (e.g., a navbar or sidebar) to a fixed position during scrolling. In Bootstrap 5, the position-sticky class (or custom CSS) replaces Affix, keeping elements fixed within their parent container until scrolling past a defined area. It’s simpler and doesn’t require JavaScript.

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

Step 2: Create a Basic Sticky Navigation

Start with a sticky navbar that stays at the top of a container. Use this code:

<div class="container">
    <h3>Basic Sticky Navigation</h3>
    <div style="height: 400px; overflow-y: scroll;">
        <nav class="navbar navbar-expand-lg bg-light sticky-top mb-3">
            <div class="container-fluid">
                <div class="navbar-nav">
                    <a class="nav-link active" href="#section1">Section 1</a>
                    <a class="nav-link" href="#section2">Section 2</a>
                </div>
            </div>
        </nav>
        <div id="section1">
            <h4>Section 1</h4>
            <p>Content for section 1. Scroll to see the navbar stick.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="section2">
            <h4>Section 2</h4>
            <p>Content for section 2. Keep scrolling.</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
</div>

Explanation:

container: Centers and constrains content.
style="height: 400px; overflow-y: scroll;": Creates a scrollable container to test stickiness.
navbar sticky-top bg-light: Makes the navbar stick to the top of the scrollable area.
navbar-nav and nav-link: Style navigation links.
mb-3: Adds margin-bottom for spacing.

Scrolling keeps the navbar fixed at the top of the container.

Step 3: Use Sticky Sidebar

Create a sticky sidebar, a common Affix use case. Try this:

<div class="container">
    <h3>Sticky Sidebar</h3>
    <div class="row" style="height: 400px; overflow-y: scroll;">
        <div class="col-4">
            <nav class="nav flex-column bg-primary p-3 sticky-top" style="top: 10px;">
                <a class="nav-link text-white active" href="#part1">Part 1</a>
                <a class="nav-link text-white" href="#part2">Part 2</a>
            </nav>
        </div>
        <div class="col-8">
            <div id="part1">
                <h4>Part 1</h4>
                <p>Content for part 1. The sidebar stays fixed.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
            </div>
            <div id="part2">
                <h4>Part 2</h4>
                <p>Content for part 2. Scroll to navigate.</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
        </div>
    </div>
</div>

Explanation:

row and col-4, col-8: Splits content into sidebar (4 units) and main content (8 units).
nav flex-column bg-primary: Vertical navbar with blue background.
sticky-top and style="top: 10px;": Sticks the sidebar to the top with a 10px offset.
p-3: Adds padding to the sidebar.
text-white: White links for visibility.
style="height: 400px; overflow-y: scroll;": Scrollable container for testing.

The sidebar stays fixed while scrolling through content.

Step 4: Add Smooth Scrolling

Enhance navigation with smooth scrolling. Add this:

<div class="container">
    <h3>Sticky Nav with Smooth Scroll</h3>
    <div style="height: 400px; overflow-y: scroll; scroll-behavior: smooth;">
        <nav class="navbar navbar-expand-lg bg-success sticky-top mb-3">
            <div class="container-fluid">
                <div class="navbar-nav">
                    <a class="nav-link active text-white" href="#smooth1">Section A</a>
                    <a class="nav-link text-white" href="#smooth2">Section B</a>
                </div>
            </div>
        </nav>
        <div id="smooth1">
            <h4>Section A</h4>
            <p>Content for section A. Click links for smooth scrolling.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</p>
        </div>
        <div id="smooth2">
            <h4>Section B</h4>
            <p>Content for section B. Enjoy smooth navigation.</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        </div>
    </div>
</div>

Explanation:

navbar bg-success sticky-top: Green navbar that sticks to the top.
scroll-behavior: smooth;: Enables smooth scrolling when clicking links.
text-white: White links for contrast.
style="height: 400px; overflow-y: scroll;": Scrollable content area.
Links trigger smooth scrolling to sections.

This improves UX with smooth transitions.

Step 5: Combine with an Image

Pair a sticky sidebar with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Project Sticky Sidebar</h3>
            <p>Navigate project sections.</p>
            <div class="row" style="height: 400px; overflow-y: scroll;">
                <div class="col-4">
                    <nav class="nav flex-column bg-primary p-3 sticky-top" style="top: 10px;">
                        <a class="nav-link active text-white" href="#project1">Overview</a>
                        <a class="nav-link text-white" href="#project2">Details</a>
                    </nav>
                </div>
                <div class="col-8">
                    <div id="project1">
                        <h4>Overview</h4>
                        <p>Project overview content.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                    <div id="project2">
                        <h4>Details</h4>
                        <p>Project details content.</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

Outer row and col-8, col-4: Splits content into scrollable area (8 units) and image (4 units).
Inner row and col-4, col-8: Splits scrollable area into sidebar (4 units) and content (8 units).
nav flex-column bg-primary sticky-top: Blue sticky sidebar with 10px top offset.
style="height: 400px; overflow-y: scroll;": Scrollable content area.
Uses a 200×150 green image for vibrancy.
img-fluid rounded: Responsive image with rounded corners.

The image suggests a project context.

Final Code

Here’s a combined example with varied sticky navigations and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Sticky Navbar</h3>
            <div style="height: 400px; overflow-y: scroll;">
                <nav class="navbar navbar-expand-lg bg-light sticky-top mb-3">
                    <div class="container-fluid">
                        <div class="navbar-nav">
                            <a class="nav-link active" href="#simple1">Section 1</a>
                            <a class="nav-link" href="#simple2">Section 2</a>
                        </div>
                    </div>
                </nav>
                <div id="simple1">
                    <h4>Section 1</h4>
                    <p>Content for section 1.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div id="simple2">
                    <h4>Section 2</h4>
                    <p>Content for section 2.</p>
                    <p>Consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Sticky Sidebar</h3>
            <div class="row" style="height: 400px; overflow-y: scroll;">
                <div class="col-4">
                    <nav class="nav flex-column bg-success p-3 sticky-top" style="top: 10px;">
                        <a class="nav-link active text-white" href="#side1">Part A</a>
                        <a class="nav-link text-white" href="#side2">Part B</a>
                    </nav>
                </div>
                <div class="col-8">
                    <div id="side1">
                        <h4>Part A</h4>
                        <p>Content for part A.</p>
                        <p>Sed do eiusmod tempor incididunt.</p>
                    </div>
                    <div id="side2">
                        <h4>Part B</h4>
                        <p>Content for part B.</p>
                        <p>Ut enim ad minim veniam.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Documentation Sticky Nav</h3>
            <p>Navigate documentation.</p>
            <div class="row" style="height: 400px; overflow-y: scroll; scroll-behavior: smooth;">
                <div class="col-4">
                    <nav class="nav flex-column bg-primary p-3 sticky-top" style="top: 10px;">
                        <a class="nav-link active text-white" href="#doc1">Intro</a>
                        <a class="nav-link text-white" href="#doc2">Guide</a>
                    </nav>
                </div>
                <div class="col-8">
                    <div id="doc1">
                        <h4>Intro</h4>
                        <p>Introduction to the documentation.</p>
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                    <div id="doc2">
                        <h4>Guide</h4>
                        <p>Step-by-step guide.</p>
                        <p>Consectetur adipiscing elit.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A simple sticky navbar (light-colored) at the top of a scrollable container.
A sticky sidebar (green) in a two-column layout with scrollable content.
A documentation sticky sidebar (blue) with smooth scrolling and a red 250×150 image.
All sticky navigations remain fixed during scrolling, are responsive, and include colorful images for a vibrant look.

Next Steps

Check the Bootstrap Position Docs for more sticky options.
Try custom CSS for advanced offsets or animations.
Combine with Scrollspy for active link highlighting.

Conclusion

You’ve mastered sticky navigation as an Affix alternative! With Bootstrap 5’s position-sticky and classes like sticky-top, plus striking images, you’ve created dynamic, fixed-position navigation. Keep experimenting to enhance your webpages.