Vertical scrollspy in Bootstrap

How to highlight the link based on the scroll position in vertical direction using scroll spy in Bootstrap?

Scroll spy

Scroll spy is used to highlight the link based on the scroll position or navigate the content when the link was clicked

Vertical scroll spy

We can create scroll spy in vertical direction

<style>
        body {
            position: relative;
        }
        ul.nav-pills {
            top: 20px;
            position: fixed;
        }
        div.col-sm-9 div {
            height: 250px;
            font-size: 28px;
        }
        #dnf {
            color: white;
            background-color: red;
        }
        #tec {
            color: white;
            background-color: green;
        }
        #off {
            color: white;
            background-color: orange;
        }
        #on {
            color: white;
            background-color: black;
        }
        @media screen and (max-width: 800px) {
            #dnf, #tec, #off, #on {
                margin-left: 150px;
            }
        }
    </style>
</head>
<body data-spy="scroll" data-target="#myScroll">
    <div class="container">
        <div class="row">
            <nav class="col-sm-3" id="myScroll">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#dnf">DotNetFunda</a></li>
                    <li><a href="#tec">TechFunda</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">ITFunda <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#off">Offline training</a></li>
                            <li><a href="#on">Online training</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="col-sm-9">
                <div id="dnf">
                    <h1>DotNetFunda</h1>
                    <p>Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda Am DotNetFunda </p>
                </div>
                <div id="tec">
                    <h1>TechFunda</h1>
                    <p>AmTechFunda AmTechFunda AmTechFunda AmTechFunda AmTechFunda AmTechFunda </p>
                </div>
                <div id="off">
                    <h1>ITFunda</h1>
                    <p>Offline training Offline training Offline training Offline training Offline training Offline training Offline training  Offline training  Offline training Offline training</p>
                </div>
                <div id="on">
                    <h1>ITFunda</h1>
                    <p>Online training Online training Online training Online training Online training Online training Online training Online training Online training Online training Online training </p>
                </div>
            </div>
        </div>
    </div>
</body>

In the above code snippet we have defined the scrollspy in vertical direction, we have defined the data-spy as scroll and data-target as #myscroll in the body element
In the next line we have class value as container in the div section, we have taken another div in the div section defining the class value as row
In the next line of the div section we have the nav element with class value col-sm-3 with id as myscroll which calls the body element to scroll
In the next line of the nav element we have <ul> element with class value nav nav-pills nav-stacked which creates the list values with references #dnf to DotNetFunda, #tec to TechFunda and ITFunda in the vertical direction
In the next line of nav element we created dropdown for the value ITFunda, we have <li>element with class value dropdown and the anchor tag<a> with class value dropdown-toggle and data-toggle as dropdown in the <li>element specifies dropdown, we have span element with class value caret to define the symbol and we have <ul>element with class value dropdown-menu to define the dropdown values as offline training and online training with references as #off to offline training and #on to online training
After creating list values in the nav element, we have taken another div section to define the description of the list values by defining id of the value, we have class value as col-sm-9 which creates space for the description
In the next line we are having the id as dnf, which calls the dotnetfunda, we are having the paragraph <p> which shows the description of the dotnetfunda
In the next line we are having the id as tec, which calls the TechFunda, we are having the paragraph <p> which shows the description of the TechFunda
In the next line we are having the id as off, which calls the ITFunda, we are having the paragraph <p> which shows the description of the offline training
In the next line we are having the id as on, which calls the ITFunda, we are having the paragraph <p> which shows the description of the online training
We have the style sheet in the body to define the scrollspy
body{position:relative} - It sets the position of the body to relative
ul.nav-pills{top:20px,position:fixed} - It defines the ul list values which present in the nav elements to top:20px and position:fixed is used to scroll the nav elements
div.col-sm-9 div {height:250px;font-size:28px} - It sets the col-sm-9 div section height as 250px and font-size as 28px which sets the size of the text as 28px;
We have changed the color and background color of the list values by giving id