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 the 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.
Example
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Via JavaScript
Enable manually with:
Example
$('.nav').affix({offset: {top: 150} });
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 |
| target | selector | node | element |
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) | |
| 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) | |
| 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) | |
| 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) | |
| 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) | |
| 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) |
More Examples
Affixed navbar
Create a horizontal affixed navigation menu:
Example
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
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>):
Example
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
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>
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>
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;
}
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;
}