data-spy="scroll" to the element that should be used as the scrollable area ( <body> ) element. data-target attribute with a value of the id or the class name of the navigation bar (.navbar). This is to make sure that the navbar is connected with the scrollable area..active class change. The dropdown items will be highlighted as well.<body data-spy="scroll" data-target=".navbar" data-offset="50">
<style style="text/css">
body {
position: relative;
}
</style>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#HTML5">HTML5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#CSS3">CSS3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Bootstrap
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#Bootstrap3">Bootstrap 3</a>
<a class="dropdown-item" href="#Bootstrap4">Bootstrap 4</a>
</div>
</li>
</ul>
</nav>
<div id="HTML5" class="container-fluid text-light bg-info" style="padding-top:70px;padding-bottom:70px">
<h2>HTML5</h2>
<p>HTML5 (No space between "HTML" and "5")is a markup language used for structuring
and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard.</p>
<p>It was published in 28 October 2014, W3C also published an HTML 5.1 Candidate
Recommendation on 21 June 2016. The World Wide Web Consortium (W3C) to improve the
language with support for the latest multimedia,..</p>
</div>
<div id="CSS3" class="container-fluid text-light bg-success" style="padding-top:70px;padding-bottom:70px">
<h2>CSS3</h2>
<p>The CSS was started to develop around 1998. And till 2009, it was under development.
The first working draft of CSS3 came in 19-01-2001. but it was initially declared early
in the June 1999. The main difference between css2 and css3 is Media Queries, Namespaces,
Selectors Level 3, Color.</p>
</div>
<div id="Bootstrap3" class="container-fluid text-light bg-dark" style="padding-top:70px;padding-bottom:70px">
<h2>Bootstrap 3</h2>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing
responsive, mobile-first web sites. Bootstrap is faster and easier web development.</p>
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately
scales up to 12 columns as the device or viewport size increases. It includes predefined
classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</div>
<div id="Bootstrap4" class="container-fluid text-light bg-warning" style="padding-top:70px;padding-bottom:70px">
<h2>Bootstrap 4</h2>
<p>Bootstrap 4 alpha 1 was released on 19th August 2015. Since then there have been
many alpha releases. And finally after that on 10th August 2017, Bootstrap released
the first beta for the version 4 of Bootstrap. Bootstrap 4 Beta 2 was released on
October 19th, 2017. The bootstrap is world's most popular frontend framework for
building or developing responsive websites, mobile-first sites and web applications.</p>
</div>Bootstrap's vertical scrollspy navigation pills as menu is following :
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<style style="text/css">
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-8 div {
height: 400px;
padding:15px;
}
</style>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#HTML5">HTML5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#CSS3">CSS3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Bootstrap3">Bootstrap 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Bootstrap4">Bootstrap 4</a>
</li>
</ul>
</nav>
<div class="col-sm-9 col-8">
<div id="HTML5" class="text-light bg-info">
<h2>HTML5</h2>
<p>HTML5 (No space between "HTML" and "5")is a markup language used for structuring
and presenting content on the World Wide Web. It is the fifth and current version
of the HTML standard.</p>
<p>It was published in 28 October 2014, W3C also published an HTML 5.1 Candidate
Recommendation on 21 June 2016. The World Wide Web Consortium (W3C) to improve the
language with support for the latest multimedia,..</p>
</div>
<div id="CSS3" class="text-light bg-success">
<h2>CSS3</h2>
<p>The CSS was started to develop around 1998. And till 2009, it was under development.
The first working draft of CSS3 came in 19-01-2001. but it was initially declared early
in the June 1999. The main difference between css2 and css3 is Media Queries, Namespaces,
Selectors Level 3, Color.</p>
</div>
<div id="Bootstrap3" class="text-light bg-dark">
<h2>Bootstrap 3</h2>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing
responsive, mobile-first web sites. Bootstrap is faster and easier web development.</p>
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately
scales up to 12 columns as the device or viewport size increases. It includes predefined
classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</div>
<div id="Bootstrap4" class="text-light bg-primary">
<h2>Bootstrap4</h2>
<p>Bootstrap 4 alpha 1 was released on 19th August 2015. Since then there have been
many alpha releases. And finally after that on 10th August 2017, Bootstrap released
the first beta for the version 4 of Bootstrap. Bootstrap 4 Beta 2 was released on
October 19th, 2017. The bootstrap is world's most popular frontend framework for
building or developing responsive websites, mobile-first sites and web applications.</p>
</div>
</div>
</div>
</div>
</body>