Bootstrap Default Scrollspy Tutorial | Coding Tag
×

Bootstrap Default ScrollSpy

3368

Scroll the page below the navbar and active class change. When u scroll the page, then your top navigation bar auto change with active. you can modify as per your requirement.

For any technical issue or support, please ask your questions on below comment box. Our team will always happy to serve you..

Code:

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap </title>
<link href ="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet">
</head>

<body data-spy="scroll" data-target=".navbar">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top pull-right">
<div class="container">
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li> <a href="#home"> Home </a></li>
<li> <a href="#about"> About us </a></li>
<li> <a href="#services"> Services </a></li>
<li> <a href="#contact"> Contact us </a></li>
</ul>
</div>
</div>
</nav>
<div id="home" class="bg-success"> <br><br><br>
<h1> Home </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. Aenean ut dui et felis fermentum congue. Aliquam elementum semper leo, id scelerisque enim tempor eget. In ultrices ullamcorper dolor, rhoncus venenatis velit lacinia vel. Maecenas ante ante, rhoncus eget feugiat sit amet, porta in mauris. Curabitur non tellus eu nisi elementum dapibus. Integer dictum ante ac lacinia imperdiet. Quisque congue ante non risus lobortis, ut blandit arcu consequat. In non diam vel nibh molestie sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet blandit nunc, a pulvinar odio fringilla nec.

Suspendisse vitae magna neque. Vestibulum elementum nibh in orci egestas, nec dapibus neque varius. Nullam hendrerit, turpis quis tempor mollis, augue augue aliquet turpis, eu pellentesque augue neque id erat. Donec bibendum pulvinar libero, sit amet posuere neque auctor eu. Phasellus non nisi vitae tellus hendrerit facilisis vitae sed lectus. Vestibulum non est aliquet, porta tellus sit amet, aliquam eros. Nullam porta sagittis nisi, sit amet gravida nisl.

Donec massa felis, vestibulum ac urna vel, molestie lobortis urna. Duis efficitur mi sit amet magna consectetur pharetra. Donec urna libero, finibus sit amet dictum volutpat, suscipit quis ex. Vivamus ullamcorper porta risus eu sagittis. Duis ultricies ante ut magna vehicula ultrices. Aliquam pharetra mollis orci ut accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Ut in malesuada erat, sed mattis mauris. Nunc id erat id purus dictum malesuada. Morbi non maximus odio, non posuere neque. Donec nec lectus et lorem volutpat mollis vitae ac magna. Proin id sem ligula. Phasellus varius sit amet tellus a sollicitudin. Maecenas id ligula vitae mauris sodales euismod a at ex. Vivamus sollicitudin sollicitudin ante, et consequat libero sollicitudin ut. Curabitur urna elit, elementum eget consequat id, ullamcorper non ex.

Aliquam quis enim rutrum, dapibus elit vitae, ornare neque. Vivamus maximus orci augue, ac tristique ex dignissim ut. Mauris tincidunt accumsan condimentum. Duis interdum metus dolor. Pellentesque placerat ornare ligula a consequat. Ut non dapibus nisl. Sed vehicula magna justo. Quisque varius lobortis massa a congue. In lacus arcu, aliquet et ullamcorper ac, vehicula eu enim. Suspendisse pellentesque viverra dolor nec commodo. Morbi consectetur nunc sed lectus consequat, pulvinar rhoncus ipsum tincidunt. In sagittis in lacus ac rutrum. Cras feugiat bibendum urna a fermentum. Aliquam vel sem ac ante rhoncus tincidunt. </p>
</div>
<div id="about" class="bg-danger">
<h1> About us </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. Aenean ut dui et felis fermentum congue. Aliquam elementum semper leo, id scelerisque enim tempor eget. In ultrices ullamcorper dolor, rhoncus venenatis velit lacinia vel. Maecenas ante ante, rhoncus eget feugiat sit amet, porta in mauris. Curabitur non tellus eu nisi elementum dapibus. Integer dictum ante ac lacinia imperdiet. Quisque congue ante non risus lobortis, ut blandit arcu consequat. In non diam vel nibh molestie sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet blandit nunc, a pulvinar odio fringilla nec.

Suspendisse vitae magna neque. Vestibulum elementum nibh in orci egestas, nec dapibus neque varius. Nullam hendrerit, turpis quis tempor mollis, augue augue aliquet turpis, eu pellentesque augue neque id erat. Donec bibendum pulvinar libero, sit amet posuere neque auctor eu. Phasellus non nisi vitae tellus hendrerit facilisis vitae sed lectus. Vestibulum non est aliquet, porta tellus sit amet, aliquam eros. Nullam porta sagittis nisi, sit amet gravida nisl.

Donec massa felis, vestibulum ac urna vel, molestie lobortis urna. Duis efficitur mi sit amet magna consectetur pharetra. Donec urna libero, finibus sit amet dictum volutpat, suscipit quis ex. Vivamus ullamcorper porta risus eu sagittis. Duis ultricies ante ut magna vehicula ultrices. Aliquam pharetra mollis orci ut accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Ut in malesuada erat, sed mattis mauris. Nunc id erat id purus dictum malesuada. Morbi non maximus odio, non posuere neque. Donec nec lectus et lorem volutpat mollis vitae ac magna. Proin id sem ligula. Phasellus varius sit amet tellus a sollicitudin. Maecenas id ligula vitae mauris sodales euismod a at ex. Vivamus sollicitudin sollicitudin ante, et consequat libero sollicitudin ut. Curabitur urna elit, elementum eget consequat id, ullamcorper non ex.

Aliquam quis enim rutrum, dapibus elit vitae, ornare neque. Vivamus maximus orci augue, ac tristique ex dignissim ut. Mauris tincidunt accumsan condimentum. Duis interdum metus dolor. Pellentesque placerat ornare ligula a consequat. Ut non dapibus nisl. Sed vehicula magna justo. Quisque varius lobortis massa a congue. In lacus arcu, aliquet et ullamcorper ac, vehicula eu enim. Suspendisse pellentesque viverra dolor nec commodo. Morbi consectetur nunc sed lectus consequat, pulvinar rhoncus ipsum tincidunt. In sagittis in lacus ac rutrum. Cras feugiat bibendum urna a fermentum. Aliquam vel sem ac ante rhoncus tincidunt. </p>
</div>
<div id="services" class="bg-primary">
<h1> Services </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. Aenean ut dui et felis fermentum congue. Aliquam elementum semper leo, id scelerisque enim tempor eget. In ultrices ullamcorper dolor, rhoncus venenatis velit lacinia vel. Maecenas ante ante, rhoncus eget feugiat sit amet, porta in mauris. Curabitur non tellus eu nisi elementum dapibus. Integer dictum ante ac lacinia imperdiet. Quisque congue ante non risus lobortis, ut blandit arcu consequat. In non diam vel nibh molestie sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet blandit nunc, a pulvinar odio fringilla nec.

Suspendisse vitae magna neque. Vestibulum elementum nibh in orci egestas, nec dapibus neque varius. Nullam hendrerit, turpis quis tempor mollis, augue augue aliquet turpis, eu pellentesque augue neque id erat. Donec bibendum pulvinar libero, sit amet posuere neque auctor eu. Phasellus non nisi vitae tellus hendrerit facilisis vitae sed lectus. Vestibulum non est aliquet, porta tellus sit amet, aliquam eros. Nullam porta sagittis nisi, sit amet gravida nisl.

Donec massa felis, vestibulum ac urna vel, molestie lobortis urna. Duis efficitur mi sit amet magna consectetur pharetra. Donec urna libero, finibus sit amet dictum volutpat, suscipit quis ex. Vivamus ullamcorper porta risus eu sagittis. Duis ultricies ante ut magna vehicula ultrices. Aliquam pharetra mollis orci ut accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Ut in malesuada erat, sed mattis mauris. Nunc id erat id purus dictum malesuada. Morbi non maximus odio, non posuere neque. Donec nec lectus et lorem volutpat mollis vitae ac magna. Proin id sem ligula. Phasellus varius sit amet tellus a sollicitudin. Maecenas id ligula vitae mauris sodales euismod a at ex. Vivamus sollicitudin sollicitudin ante, et consequat libero sollicitudin ut. Curabitur urna elit, elementum eget consequat id, ullamcorper non ex.

Aliquam quis enim rutrum, dapibus elit vitae, ornare neque. Vivamus maximus orci augue, ac tristique ex dignissim ut. Mauris tincidunt accumsan condimentum. Duis interdum metus dolor. Pellentesque placerat ornare ligula a consequat. Ut non dapibus nisl. Sed vehicula magna justo. Quisque varius lobortis massa a congue. In lacus arcu, aliquet et ullamcorper ac, vehicula eu enim. Suspendisse pellentesque viverra dolor nec commodo. Morbi consectetur nunc sed lectus consequat, pulvinar rhoncus ipsum tincidunt. In sagittis in lacus ac rutrum. Cras feugiat bibendum urna a fermentum. Aliquam vel sem ac ante rhoncus tincidunt.
Donec massa felis, vestibulum ac urna vel, molestie lobortis urna. Duis efficitur mi sit amet magna consectetur pharetra. Donec urna libero, finibus sit amet dictum volutpat, suscipit quis ex. Vivamus ullamcorper porta risus eu sagittis. Duis ultricies ante ut magna vehicula ultrices. Aliquam pharetra mollis orci ut accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Ut in malesuada erat, sed mattis mauris. Nunc id erat id purus dictum malesuada. Morbi non maximus odio, non posuere neque. Donec nec lectus et lorem volutpat mollis vitae ac magna. Proin id sem ligula. Phasellus varius sit amet tellus a sollicitudin. Maecenas id ligula vitae mauris sodales euismod a at ex. Vivamus sollicitudin sollicitudin ante, et consequat libero sollicitudin ut. Curabitur urna elit, elementum eget consequat id, ullamcorper non ex.

Aliquam quis enim rutrum, dapibus elit vitae, ornare neque. Vivamus maximus orci augue, ac tristique ex dignissim ut. Mauris tincidunt accumsan condimentum. Duis interdum metus dolor. Pellentesque placerat ornare ligula a consequat. Ut non dapibus nisl. Sed vehicula magna justo. Quisque varius lobortis massa a congue. In lacus arcu, aliquet et ullamcorper ac, vehicula eu enim. Suspendisse pellentesque viverra dolor nec commodo. Morbi consectetur nunc sed lectus consequat, pulvinar rhoncus ipsum tincidunt. In sagittis in lacus ac rutrum. Cras feugiat bibendum urna a fermentum. Aliquam vel sem ac ante rhoncus tincidunt.
</p>
</div>

<div id="contact" class="bg-success">
<h1> Contact us </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. Aenean ut dui et felis fermentum congue. Aliquam elementum semper leo, id scelerisque enim tempor eget. In ultrices ullamcorper dolor, rhoncus venenatis velit lacinia vel. Maecenas ante ante, rhoncus eget feugiat sit amet, porta in mauris. Curabitur non tellus eu nisi elementum dapibus. Integer dictum ante ac lacinia imperdiet. Quisque congue ante non risus lobortis, ut blandit arcu consequat. In non diam vel nibh molestie sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet blandit nunc, a pulvinar odio fringilla nec.

Suspendisse vitae magna neque. Vestibulum elementum nibh in orci egestas, nec dapibus neque varius. Nullam hendrerit, turpis quis tempor mollis, augue augue aliquet turpis, eu pellentesque augue neque id erat. Donec bibendum pulvinar libero, sit amet posuere neque auctor eu. Phasellus non nisi vitae tellus hendrerit facilisis vitae sed lectus. Vestibulum non est aliquet, porta tellus sit amet, aliquam eros. Nullam porta sagittis nisi, sit amet gravida nisl.

Donec massa felis, vestibulum ac urna vel, molestie lobortis urna. Duis efficitur mi sit amet magna consectetur pharetra. Donec urna libero, finibus sit amet dictum volutpat, suscipit quis ex. Vivamus ullamcorper porta risus eu sagittis. Duis ultricies ante ut magna vehicula ultrices. Aliquam pharetra mollis orci ut accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Ut in malesuada erat, sed mattis mauris. Nunc id erat id purus dictum malesuada. Morbi non maximus odio, non posuere neque. Donec nec lectus et lorem volutpat mollis vitae ac magna. Proin id sem ligula. Phasellus varius sit amet tellus a sollicitudin. Maecenas id ligula vitae mauris sodales euismod a at ex. Vivamus sollicitudin sollicitudin ante, et consequat libero sollicitudin ut. Curabitur urna elit, elementum eget consequat id, ullamcorper non ex.

Aliquam quis enim rutrum, dapibus elit vitae, ornare neque. Vivamus maximus orci augue, ac tristique ex dignissim ut. Mauris tincidunt accumsan condimentum. Duis interdum metus dolor. Pellentesque placerat ornare ligula a consequat. Ut non dapibus nisl. Sed vehicula magna justo. Quisque varius lobortis massa a congue. In lacus arcu, aliquet et ullamcorper ac, vehicula eu enim. Suspendisse pellentesque viverra dolor nec commodo. Morbi consectetur nunc sed lectus consequat, pulvinar rhoncus ipsum tincidunt. In sagittis in lacus ac rutrum. Cras feugiat bibendum urna a fermentum. Aliquam vel sem ac ante rhoncus tincidunt.
Donec massa felis, vestibulum ac urna vel, molestie lobortis urna. Duis efficitur mi sit amet magna consectetur pharetra. Donec urna libero, finibus sit amet dictum volutpat, suscipit quis ex. Vivamus ullamcorper porta risus eu sagittis. Duis ultricies ante ut magna vehicula ultrices. Aliquam pharetra mollis orci ut accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Ut in malesuada erat, sed mattis mauris. Nunc id erat id purus dictum malesuada. Morbi non maximus odio, non posuere neque. Donec nec lectus et lorem volutpat mollis vitae ac magna. Proin id sem ligula. Phasellus varius sit amet tellus a sollicitudin. Maecenas id ligula vitae mauris sodales euismod a at ex. Vivamus sollicitudin sollicitudin ante, et consequat libero sollicitudin ut. Curabitur urna elit, elementum eget consequat id, ullamcorper non ex.

Aliquam quis enim rutrum, dapibus elit vitae, ornare neque. Vivamus maximus orci augue, ac tristique ex dignissim ut. Mauris tincidunt accumsan condimentum. Duis interdum metus dolor. Pellentesque placerat ornare ligula a consequat. Ut non dapibus nisl. Sed vehicula magna justo. Quisque varius lobortis massa a congue. In lacus arcu, aliquet et ullamcorper ac, vehicula eu enim. Suspendisse pellentesque viverra dolor nec commodo. Morbi consectetur nunc sed lectus consequat, pulvinar rhoncus ipsum tincidunt. In sagittis in lacus ac rutrum. Cras feugiat bibendum urna a fermentum. Aliquam vel sem ac ante rhoncus tincidunt.
</p>
</div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>

</html>



Best WordPress Hosting


Share:


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price



Leave a Reply


Comments
    Waiting for your comments