Bootstrap JS Affix
JS Affix (affix.js)
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.
The affix plugin toggles between three classes: .affix, .affix-top, and
.affix-bottom. Each class represents a particular state. You must add CSS
properties to handle the actual positions, with the exception of position:fixed
on the .affix class.
For more information, read our Bootstrap Affix Tutorial.
Tip: The Affix plugin is often used together with the Scrollspy plugin.
Via data-* Attributes
Add data-spy="affix" to the element you want to spy on,
and the data-offset-top|bottom="number"
attribute to calculate the position of the scroll.
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="205">
Try it
Via JavaScript
Enable manually with:
$('.nav').affix({offset: {top: 150} });
Try it
Affix Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating
position of scroll. When using a single number, the offset is added to both
top and bottom directions. If you only want to control the top or the
bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
Affix Events
The following table lists all available affix events.
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the
.affix-top class is about to be replaced with the .affix class) |
Try it |
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the
.affix-top class is replaced with the .affix class) |
Try it |
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed)
position (e.g., the .affix class is about to be replaced with
.affix-top) |
Try it |
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed)
position (e.g., the .affix class has been replaced with
.affix-top) |
Try it |
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed)
position (e.g., the .affix class is about to be replaced with
.affix-bottom) |
Try it |
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed)
position (e.g., the .affix class has been replaced with
.affix-bottom) |
Try it |
Examples
Affixed navbar
Create a horizontal affixed navigation menu:
Example
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Try it Yourself »
Using jQuery to automatically affix a navbar
Use jQuery's outerHeight() method to affix the navbar after the user has scrolled passed a specified element (<header>):
Scrollspy & Affix
Using the Affix plugin together with the Scrollspy plugin:
Horizontal Menu (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Try it Yourself »
Vertical Menu (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
Try it Yourself »
Animated navbar on affix
Use CSS to manipulate the different .affix classes:
Example - Change background color and padding of navbar on scroll
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff
!important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
}
Try it Yourself »
Example - Slide in the navbar
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}
Try it Yourself »