Bootstrap Affix Plugin (Advanced)
The Affix Plugin
The Affix plugin allows an element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them "stick" at a specific area while scrolling up and down the page.
The plugin toggles this behavior on and off (changes the value of CSS position from static to fixed), depending on scroll position.
Example An affixed navbar:
How To Create an Affixed Navigation Menu
The below example shows how to create a horizontal affixed navigation menu:
Example
<nav class="navbar navbar-inverse" data-spy="affix"
data-offset-top="200">
Try it Yourself »
The below example will help how to create a vertical affixed navigation menu:
Example
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="209">
Try it Yourself »
Example Explained
We can add data-spy="affix" to the element you want affixed.
Otherwise you can add the data-offset-top|bottom attribute to
calculate the position of the scroll.
Scrollspy & Affix
Using the Affix plugin together with the Scrollspy plugin:
Horizontal Menu (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="55">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="200">
...
</nav>
</body>
Try it Yourself »
Vertical Menu (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="210">
...
</nav>
</body>
Try it Yourself »