Bootstrap Affix Plugin Advanced

Bootstrap Affix Plugin Advanced is used to pin (fix) an element to a specific position in the viewport based on scroll position. It allows elements like menus, sidebars, ads, or TOCs to become sticky while scrolling.

⚠️ Note: Affix exists only in Bootstrap 3.
In Bootstrap 4 & 5, it was replaced by position: sticky and Scrollspy/JS.

✅ Basic Affix Example

data-spy="affix" → Enables Affix.
data-offset-top="150" → When user scrolls past 150px, element becomes fixed.

🎨 Styling for Affixed Element

Affix plugin automatically adds these classes during scrolling:

Class	Behavior
`.affix`	Element is fixed in place
`.affix-top`	Before element becomes affixed
`.affix-bottom`	When scrolling past container bottom

Example CSS:

🔹 Advanced Example: Sidebar with Scrollspy + Affix

<div class="row">
<nav class="col-sm-3" id="sidebar" data-spy="affix" data-offset-top="200">
<ul class="nav nav-pills nav-stacked" id="sidebarNav">
<li class="active"><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
</ul>
</nav>

<div class="col-sm-9" data-spy="scroll" data-target="#sidebarNav" data-offset="70">
<h2 id="one">Section One</h2>
<p>...</p>
<h2 id="two">Section Two</h2>
<p>...</p>
<h2 id="three">Section Three</h2>
<p>...</p>
</div>
</div>

<li><a href="#three">Three</a></li>

</ul>

</nav>

<h2 id="one">Section One</h2>

<h2 id="two">Section Two</h2>

<h2 id="three">Section Three</h2>

</div>

This creates a fixed sidebar navigation that also updates active links while scrolling.

🔹 Affix with Top and Bottom Offset

data-offset-bottom prevents the element from covering the footer.

🔹 Initialize with JavaScript (Optional)

Useful for dynamic layouts (resizable content).

🧠 When to Use Affix?

Scenario	Recommended
Sticky sidebar on long pages	✔️
Sticky pricing table	✔️
Floating table of contents	✔️
Sticky header/footer	✔️
Ad placement while scrolling	✔️

⚠️ Important Notes

Feature	Status
Bootstrap 3	Fully supported
Bootstrap 4 & 5	❌ Removed (use `position: sticky` or JS)
Works with Scrollspy	✔️

Bootstrap Affix Plugin Advanced