Scroll spy is used to highlight the link based on the scroll position or navigate the content when the link was clicked
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>
scroll
and data-target as #myscroll
in the body elementcol-sm-
3
with id as myscroll which calls the body element to scrollnav nav-pills nav-stacked
which creates the list values with references #dnf
to DotNetFunda, #tec
to TechFunda and ITFunda in the vertical directiondropdown
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 col-sm-9
which creates space for the description id
as dnf
, which calls the dotnetfunda, we are having the paragraph <p> which shows the description of the dotnetfunda id
as tec
, which calls the TechFunda, we are having the paragraph <p> which shows the description of the TechFunda id
as off
, which calls the ITFunda, we are having the paragraph <p> which shows the description of the offline training id
as on
, which calls the ITFunda, we are having the paragraph <p> which shows the description of the online trainingbody{position:relative}
- It sets the position of the body to relativeul.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;output
Views: 9207 | Post Order: 55