Scroll spy with data-attributes in Bootstrap

How to highlight the link based on the scroll position or navigate to the content for which the link was clicked using scrollspy in bootstrap

Scrollspy with data-attribute

Scroll spy is used to highlight the link based on the scroll position or navigate to the content for which the link was clicked scrolllspy uses data-attribute such as data-spy="scroll".

<body>
    <nav id="navbar-example" class="navbar navbar-inverse">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-scrollspy">
                <span class="sr-only">Toggle navigation</span>
                <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 class="collapse navbar-collapse" id="navbar-scrollspy">
            <ul class="nav navbar-nav">
                <li><a href="#DNF">DotNetFunda</a></li>
                <li><a href="#TECH">TechFunda</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        ITFunda
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#off">offline training</a></li>
                        <li><a href="#on">online training</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <div data-spy="scroll" data-target="#navbar-example" data-offset="0"
         style="height:200px; overflow:auto; position: relative;">
        <h4 id="DNF">DotNetFunda</h4>
        <p>
            DotNetFunda is a online training tutorial and makes you share technlogy with each other
            DotNetFunda is a online training tutorial and makes you share technlogy with each other
            DotNetFunda is a online training tutorial and makes you share technlogy with each other
            DotNetFunda is a online training tutorial and makes you share technlogy with each other
        </p>
        <h4 id="TECH">TechFunda</h4>
        <p>
            TechFunda is a online training tutorial in step by step manner
            TechFunda is a online training tutorial in step by step manner
            TechFunda is a online training tutorial in step by step manner
            TechFunda is a online training tutorial in step by step manner
        </p>
        <h4 id="ITF">ITFunda</h4>
        <p>
            ITFunda is a online training which makes provides offlie training and online training and provides job support
            ITFunda is a online training which makes provides offlie training and online training and provides job support
            ITFunda is a online training which makes provides offlie training and online training and provides job support
            ITFunda is a online training which makes provides offlie training and online training and provides job support
        </p>
        <h4 id="off">offline training</h4>
        <p>
            ITFunda provides offline training in class room to make people learn .net easy
            ITFunda provides offline training in class room to make people learn .net easy
            ITFunda provides offline training in class room to make people learn .net easy
            ITFunda provides offline training in class room to make people learn .net easy
        </p>
        <h4 id="on">online training</h4>
        <p>
            ITFunda provides online training which provides training on online
            ITFunda provides online training which provides training on online
            ITFunda provides online training which provides training on online
            ITFunda provides online training which provides training on online
        </p>
    </div>
</body>

In the above code snippet we have defined the scroll function of the bootstrap, we have taken nav element to define the scroll spy, in the nav element we have id as navbar-example and class value as navbar navbar-inverse
In the next line we are having the class value as navbar-header in the div section, we have button with class value as navbar-toggle with type=button and data-toggle as collapse, data-target as #navbar-scrollspy
In the next line we are having the class value as icon-bar in the span element and we defined the anchor tag with class value as navbar-brand with value as SN ITFunda
In the next line we are having the div section with the class value as collapse navbar-collapse and id as navbar-scrollspy, we have defined the list values in the <ul> elements with the values as DotNetFunda, TechFunda and ITFunda
In the next line we have created dropdown list for the value ITFunda, we have taken class as dropdown in the li element and anchor tag with with class value dropdown-toggle and data-toggle as dropdown which defines the dropdown for the given value as ITFunda and we have class as caret in the b element which creates dropdown symbol to the dropdown value ITFunda
After creating the dropdown value we have created the list values in the dropdown using class as dropdown-menu, in the ul element with li element values as offline training and online training
After creating the list values in the dropdown menu we have div section to scroll the given values in the navbar using data-spy as scroll , data-target as #navbar-example which calls the navbar to scroll and we used css properties by providing height, position and overflow
In the next line we are giving heading tag as <h4> with id as DNF, TECH, ITF, off, on, with values as DotNetFunda, TechFunda, ITFunda, ofline training and online training and we have defined the <p> tag(paragraph) to define the scroll function of the values