Latest web development tutorials
 

Bootstrap JS Affix

❮ Previous Next Reference ❯

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

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
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
Examples

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

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)

<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 »

❮ Previous Next Reference ❯