Explain Affix plugin in Bootstrap

Last Updated : 24 May, 2022

The affix plugin in bootstrap allows us to make an element fixed or stable for the particular position or area on the webpage. It is mainly used with Navbar to make it sticky or locked at the top of the page so that if the user scrolls down the page the Navbar is still visible to him and the user can click on any navbar link.

How to use the Affix plugin:

data-spy attribute: Add the data-spy=”affix” to the element you want to use the Affix plugin.
data-offset-top|bottom: Add this attribute to get the position of the scroll.

Syntax:

 <nav data-spy="affix" data-offset-bottom="250">
     //content of the element
 </nav>

How the Affix plugin works:

The Affix plugin mainly consists of three classes: .affix, .affix-top, .affix-bottom.
.affix-top: The affix-top class is used to specify the initial position of the element at the top of the page, then if the user starts scrolling down the page the .affix-top class is replaced by the .affix class which makes the element fixed or locked at its initial position. The .affix class uses the position: fixed property of CSS to make the element fixed at its position.
.affix-bottom: The .affix-bottom class is used to specify the initial position of the element at the bottom of the page, then it is replaced by the .affix class if the user scrolls down the page and the element will be fixed at the given initial position.

Example 1: In this example, we will fix the navbar by using the affix plugin.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Affix plugin</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
    <style>
        .affix {
            top: 0;
            width: 100%;
            z-index: 9999 !important;
        }
        .affix+.container-fluid {
            padding-top: 70px;
        }
    </style>
</head>
<body>
    <div class="container-fluid"
        style="background-color:#24e724;color:#fff;height:200px;">
        <h1>GeeksforGeeks</h1>
        <h3>Hey Geek, Welcome to GFG!</h3>
        <h4>A computer science portal for all geeks.</h4>
        <h4>
            GeeksforGeeks is an online learning 
            platform for all geeks around the globe.
        </h4>
    </div>
    <nav class="navbar navbar-inverse" data-spy="affix"
        data-offset-top="197">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Practice</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Events</a></li>
        </ul>
    </nav>
    <div class="container-fluid" style="height:100vh">
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
        <h2>GeeksforGeeks</h2>
    </div>
</body>
</html>

Output:

Example 2: In this example, we will fix the responsive navbar by using the affix plugin.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Affix Plugin</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
    <style>
        .affix {
            top: 20px;
            z-index: 9999 !important;
        }
    </style>
</head>
<body>
    <div class="container-fluid"
        style="background-color:#24e724;color:#fff;height:200px;">
        <h1>GeeksforGeeks</h1>
        <h3>Hey Geek, Welcome to GFG!</h3>
        <h4>A computer science portal for all geeks.</h4>
        <h4>
            GeeksforGeeks is an online learning 
            platform for all geeks around the globe.
        </h4>
    </div>
    <div class="container">
        <div class="row">
            <nav class="col-sm-3">
                <ul class="nav nav-pills nav-stacked"
                    data-spy="affix" data-offset-top="205">
                    <li style="background-color: #24e7c7;color:#fff;"
                        class="active">
                        <a href=" #section1">Vertical Fix 1</a>
                    </li>
                    <li style="background-color: #24e7c7;color:#fff;">
                        <a href="#section2">Vertical Fix 2</a>
                    </li>
                    <li style="background-color: #24e7c7;color:#fff;">
                        <a href=" #section3">Vertical Fix 3</a>
                    </li>
                </ul>
            </nav>
            <div class="col-sm-9">
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
                <h2>GeeksforGeeks</h2>
            </div>
        </div>
    </div>
</body>
</html>