HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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 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.
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">
Enable manually with:
$('.nav').affix({offset: {top: 150} });
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 |
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 |
Affixed navbar
Create a horizontal affixed navigation menu:
<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>):
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Scrollspy & Affix
Using the Affix plugin together with the Scrollspy plugin:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
<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:
.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;
}
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}