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>
navbar-example
and class value as navbar navbar-inverse
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
icon-bar
in the span
element and we defined the anchor tag with class value as navbar-brand
with value as SN ITFundacollapse navbar-collapse
and id as navbar-scrollspy
, we have defined the list values in the <ul>
elements with the values as DotNetFunda, TechFunda and ITFundadropdown
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 ITFundadropdown-menu
, in the ul element with li element values as offline training and online training 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<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 output
When we minimize the screen size output appears as
Views: 6556 | Post Order: 56