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.

Example

Try it Yourself »

Via JavaScript

Enable manually with:

Example

$('.nav').affix({offset: {top: 150} });

Try it Yourself »

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

More Examples

Affixed navbar

Create a horizontal affixed navigation menu:

Example

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>):

Example

$(".navbar").affix({offset: {top: $("header").outerHeight(true)} });

Try it Yourself »

Scrollspy & Affix

Using the Affix plugin together with the Scrollspy plugin:

Horizontal Menu (Navbar)

Try it Yourself »

Vertical Menu (Sidenav)

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 »

❮ Previous Next ❯