Bootstrap Affix Plugin

In our previous blog, we explored Bootstrap Modal, Tooltip, Popover, and Scrollspy Plugins in detail. These interactive components enhance user experience by displaying content elegantly and managing navigation smoothly. Now, let’s switch gears and dive into some more advanced but highly practical Bootstrap features.

In this blog, we will cover Bootstrap Affix Plugin, Bootstrap Filters, and new tools, which are added on the BS 4 version like Bootstrap Containers. These tools are essential for building dynamic, responsive web layouts.

What is the Bootstrap Affix Plugin?

The Affix plugin allows elements to become fixed (sticky) on the page when you scroll past them. This is especially useful for navigation menus or sidebars that you want to keep visible while scrolling.

Syntax:

<div data-spy="affix" data-offset-top="100">...</div>

Why Use Affix?

Keeps navigation or important UI elements visible
Enhances user experience
Great for long-scrolling pages

Example 1: An Affixed Navbar

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="60">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Credosystemz</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
<div class="container">
  <h3>Scroll down to see the navbar affix to the top</h3>
  <p>More content...</p>
</div>

Example 2: An Affixed Sidebar

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
  <div class="container">
    <div class="row">
      <nav class="col-sm-3" id="myScrollspy">
        <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="100">
          <li class="active"><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li><a href="#section3">Section 3</a></li>
        </ul>
      </nav>
      <div class="col-sm-9">
        <div id="section1" style="height:600px;"><h2>Section 1</h2></div>
        <div id="section2" style="height:600px;"><h2>Section 2</h2></div>
        <div id="section3" style="height:600px;"><h2>Section 3</h2></div>
      </div>
    </div>
  </div>

How To Create an Affixed Navigation Menu

Add data-spy=”affix” to the element.
Set data-offset-top to define when it becomes sticky.
Use proper CSS to adjust spacing.

Example Explained

When the scroll reaches data-offset-top, the menu becomes fixed.

How it works

The Affix plugin is triggered using the data-spy=”affix” attribute or via JavaScript.
When the user scrolls down the page and reaches the element’s data-offset-top value, the plugin dynamically changes the element’s CSS properties.
The element receives the class .affix, .affix-top, or .affix-bottom depending on the scroll position.
You can define styles for these classes to control how the affixed element should look and behave.
It does not interfere with the layout until the scroll reaches the threshold.
This behavior gives users a smooth experience by keeping important elements (like menus) visible without taking up space unnecessarily.

Notes:

data-spy=”affix” activates the plugin.
data-offset-top sets the scroll threshold.
When triggered, the element becomes position: fixed.
Affix is not available in Bootstrap 5; use position: sticky instead.

Scrollspy & Affix

Scrollspy automatically updates the navigation bar based on scroll position. You can combine it with Affix for sticky and dynamic menus.

<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">

Request more information

Bootstrap Affix Plugin