Scrollspy events in Bootstrap

How to fire the event when the new item becomes activated by the scrollspy or how to display the event name when the link is clicked

Scrollspy Events

We use activate.bs.scrollspy to fire the event when the new item becomes activated by the scrollspy, it displays the event name when the link is clicked.

<style>
        #demo {
            position: fixed;
            top: 350px;
            font-size: 30px;
        }

        #myScrollspy {
            position: relative;
            top: 50px;
            height:280px;
            overflow: auto;
            font-size: 30px;
        }

        #dnf {
            color: white;
            background-color: red;
        }

        #tec {
            color: white;
            background-color: black;
        }

        #child {
            color: white;
            background-color: blue;
        }

        #itf {
            color: white;
            background-color: green;
        }
    </style>
</head>
<body>
    <p id="demo">You are currently viewing page: DotNetFunda</p>

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">SN ITFunda</a>
            </div>
            <div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li><a href="#dnf">DotNetFunda</a></li>
                        <li><a href="#tec">TechFunda</a></li>
                        <li><a href="#child">KidsFunda</a></li>
                        <li><a href="#itf">ITFunda</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <div id="myScrollspy">

        <div id="dnf">
            <div class="container-fluid">
                <h1>DotNetFunda<a href="#" onclick="removeSection(this);">&times; Close</a></h1>
                <p>DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies aimed for beginners and intermediate level professionals. We help beginners to become intermediate level professionals and help intermediate level professionals to become an expert. By following our different sections regularly, we hope you will soon become one of the 'Most Valuable' professional and start shining in your career. </p>
            </div>
        </div>
        <div id="tec">
            <div class="container-fluid">
                <h1>TechFunda<a href="#" onclick="removeSection(this);">&times; Close</a></h1>
                <p>TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here.</p>
            </div>
        </div>
        <div id="child">
            <div class="container-fluid">
                <h1>KidsFunda<a href="#" onclick="removeSection(this);">&times;Close</a></h1>
                <p>KidsFunda is a online tutorial which makes people entertain by playing games, watching videos, paintings, etc</p>
            </div>
        </div>
        <div id="itf">
            <div class="container-fluid">
                <h1>ITFunda <a href="#" onclick="removeSection(this);">&times;Close</a></h1>
                <p>ITFunda is a online tutorial which provides offline training and online training for the people and also provides sales of ebooks which are helpful to understand the people to learn technologies and besides these it provides job support for the people who are facing problems in their field </p>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            removeSection = function (e) {
                $(e).parents("#myScrollspy > div").remove();
                $('#myScrollspy').each(function () {
                    $(this).scrollspy('refresh');
                });
            };
            $("#myScrollspy").scrollspy({ target: ".navbar" });
            $(".navbar").on("activate.bs.scrollspy", function () {
                var x = $(".nav li.active > a").text();
                $("#demo").empty().html("You are currently viewing: " + x);
            })
        });
    </script>

In the above code snippet we have defined the scrollspy events
In next line we have created navbar in nav element using class value navbar-inverse navbar-fixed-top and we have created div section using class value as container-fluid and we have another div section in the div section of the container fluid using class value navbar-header, we have created button in the navbar header with class value as navbar-toggle and data-target as #mynavbar and data-toggle as collapse in the button
In the next line we have anchor tag with class value as navbar-brand with value as SN ITFunda
In the next line we have created the div section with class value as collapse navbar-collapse and id as mynavbar which calls the nav element in to this div section by using id in the div section
In the next line of the div section we have <ul> element with class value nav navbar nav and we created the list values
In the next line we have created the another div section with id value myscrollspy and we have create div sections in this div section to call the description of the list values by giving their id, we have given the onclick function remove section to close the list value by using jQuery in the script function
In the next line of the html page we have script function, we have defined scrollspy refresh and activate.bs.scrollspy functions
The first function of the script, we have scrollspy refresh where we have the variable name as remove section with function(e)
$(e).parents("#myScrollspy > div").remove(); - It defines as function as parents and #myscrollspy calls the div section with id and ("#myScrollspy > div") - It defines as scrollspy function with div elements of the list value and remove clears the function
$('#myScrollspy').each(function () -It defines as #myscrollspy function applies to each function of $(this).scrollspy('refresh'); to refresh the list value
In the next function of the script we have the function activate.bs.scrollspy,
In the first line of the script function we have $("#myScrollspy").scrollspy({ target: ".navbar" }); which defines the scrollspy function to scroll the navbar by giving the #myscrollspy to scroll by giving target navbar
In the second line we have $(".navbar").on("activate.bs.scrollspy", function () - Which defines the navbar to activate the function to display which function we are visiting by giving the activate.bs.scrollspy with function var x = $(".nav li.active > a").text();- which defines the var x as navbar list value with <a> element values with text which is in the <p> tag and $("#demo").empty().html("You are currently viewing: " + x); - calls the id of the <p> element to view the visiting list value