Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap affix plugin

Suggested Video Tutorials
Part 47 - Bootstrap scrollspy
Part 48 - Bootstrap scrollspy not working
Part 49 - Bootstrap scrollspy vertical menu

In this video we will discuss the Bootstrap affix plugin.

The Bootstrap affix plugin is used to pin elements such as a navbar when they are scrolled beyond a certain point. 

Affix plugin Attributes
Attribute Description
data-spy="affix" Apply this attribute on the element that you want to affix
data-offset-top Specifies when to toggle the pinning of an element

Here's how the affix plugin works:
1. To start with, the plugin adds affix-top class to indicate the element is in its top-most position.

2. As we scroll down beyond the offset limit imposed by data-offset attribute, the plugin replaces the affix-top class with affix class which sets the position to fixed.

3. At this point we will have to tell the plugin at what position from the top or bottom we want the element to be fixed. In our example, we want the navigation menu to be fixed at 20 pixels from the top. This is the reason we have set top property value to 20px in the affix class.

.affix {
    top: 20px;

<!doctype html>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap tutorial for begineers</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="CustomStyles.css" rel="stylesheet" />
    <style type="text/css">
        body {
            position: relative;

        .affix {
            top: 20px;
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="jumbotron">
                    <h1>Bootstrap Affix Example</h1>
            <div class="col-xs-3">
                <nav id="mainNavbar">
                    <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="200">
                        <li class="active"><a href="#divDesert">Desert</a></li>
                        <li><a href="#divLighthouse">Lighthouse</a></li>
                        <li><a href="#divTulips">Tulips</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Animals <span class="caret"></span>
                            <ul class="dropdown-menu">
                                <li><a href="#divJellyfish">Jellyfish</a></li>
                                <li><a href="#divPenguins">Penguins</a></li>

            <div class="col-xs-9">
                <div id="divDesert">
                    <img src="Images/Desert.jpg" class="img-responsive" />

                <div id="divLighthouse">
                    <img src="Images/Lighthouse.jpg" class="img-responsive" />

                <div id="divTulips">
                    <img src="Images/Tulips.jpg" class="img-responsive" />

                <div id="divJellyfish">
                    <img src="Images/Jellyfish.jpg" class="img-responsive" />

                <div id="divPenguins">
                    <img src="Images/Penguins.jpg" class="img-responsive" />

    <script src="">
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
                target: '#mainNavbar',
                offset: 10

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.