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.
With Affix, when we scroll up and down the page, the menu is always visible and locked in its position.
The following example shows how to create a horizontal affixed navigation menu:
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
The following example shows how to create a vertical affixed navigation menu:
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Example Explained
Add data-spy="affix"
to the element you want affixed.
Optionally, add the data-offset-top|bottom
attribute to
calculate the position of the scroll.
How it works
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.
.affix-top
or .affix-bottom
class to indicate the element is in its top-most or bottom-most position. Positioning with CSS is not required at this point..affix-top
or .affix-bottom
class with the .affix
class (sets position:fixed
). At this point, you must add the CSS top
or bottom
property to position the affixed element in the page..affix
class with .affix-bottom
. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position:absolute
when necessary.In the first example above, the Affix plugin adds the .affix
class (position:fixed)
to the <nav> element when we have scrolled 197 pixels from the top. If you open
the example, you will also see that we added the CSS top
property with a value of 0
to the .affix
class. This is to make sure that the navbar stays at the top of the page at
all time, when we have scrolled 197 pixels from the top.
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>
For a complete reference of all affix methods and events, go to our Bootstrap JS Affix Reference.