Bootstrap affix plugin

In this we will discuss the Bootstrap affix plugin. 

Bootstrap tutorial for beginners

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

Affix plugin Attributes 
data-spy="affix"Apply this attribute on the element that you want to affix
data-offset-topSpecifies 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 {

<!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 {

        .affix {
    <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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    <script src="bootstrap/js/bootstrap.min.js"></script>

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