Bootstrap- Affix Plugin

Priyanka Patwal
Last Updated: May 13, 2022

Introduction

Bootstrap Affix plugin is used to fix an element to a specific position when the page is scrolled to a particular place.

Affix Plugin is usually applied to the navigation menu and logos to stick to a specific part of the web page after scrolling a certain distance.

The Plugin toggles this property on and off depending on the distance scrolled.

How to use Affix Plugin

Affix Plugin can be applied in two ways, through data attributes and javascript. Each of the methods is discussed below:

  1. Data Attributes: we use data-spy=" affix" to fix an element, and data offsets are used to determine the position of the scroll.


Example:

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="207">

 

 2. JavaScript: We can also affix an element manually using JavaScript as shown

Example:

$('#myAffix').affix({
   offset: {
      top: 100, bottom: function () {
         return (this.bottom = $('.bs-footer').outerHeight(true))
      }
   }
})

 

Both the methods will result in the following output:

Before scrolling:

 

After scrolling:

How does the Affix plugin work?

The affix plugin allows you to switch between three different classes: .affix, .affix-top, and .affix-bottom. Each class denotes a distinct state. Except, position: fixed on the .affix class, you must add CSS properties to handle the real positions.

  • The Plugin adds the .affix-top or .affix-bottom class to indicate whether the element is at the top or bottom of the page. CSS positioning is not necessary at this time.
  • When you scroll beyond the affixed element, the Plugin replaces the .affix-top or .affix-bottom classes with the .affix class (sets position: fixed). To place the fastened component of the page, use the CSS top or bottom property at this point.
  • When you scroll past a bottom offset, the .affix class is replaced with .affix-bottom. Because offsets are optional, you must also set the proper CSS to use them. If necessary, add position: absolute in this situation.


When we scroll 197 pixels from the top in the first example, the Affix plugin adds the .affix class (position: fixed) to the nav> element. When you open the sample, you'll notice that we gave the .affix class the CSS top attribute with a value of 0. This is to ensure that the navbar remains at the top of the page even after we've scrolled 197 pixels down.

Example of Affix Plugin

A simple horizontal affixed navbar:

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="207">

 

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)} });

 

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>

 

The output screen will look like this:

 

We can also use CSS animation with affix classes. Below are some examples.

Changing the background color

.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;
}

 

Before scrolling:

 

After scrolling:

Frequently asked questions

  1. How do I make the navbar stick to the top?
    We can use the Affix plugin to fix it to the top and set the offset to 0.
     
  2. Can we apply an affix plugin using JavaScript?
    Yes, we can use JavaScript to implement Affix Plugin.
     
  3. What are the three class affix plugin switches between?
    The affix plugin switches between three classes, they are: .affix, .affix-top and .affix-bottom.

Key takeaways

Bootstrap Affix plugin is used to fix an element to a certain position once it has been scrolled a specific distance.

There are two ways of implementing affix: data attributes and JavaScript.

We can also customize the affix classes and add animation using CSS.

For some interesting blog, stay tuned to Coding Ninjas!!

Happy Learning!!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think