Suggested Video Tutorials
Part 44 - Bootstrap tooltip manual trigger
Part 45 - Bootstrap popover
Part 46 - Bootstrap alert
In this video we will discuss the bootstrap scrollspy plugin.
The scrollspy plugin automatically highlights the navigation links based on the scroll position to indicate where the user is currently on the page. Here is an example.
As we scroll down the page, the respective navigation links in the navigation bar are automatically highlighted.
Part 44 - Bootstrap tooltip manual trigger
Part 45 - Bootstrap popover
Part 46 - Bootstrap alert
In this video we will discuss the bootstrap scrollspy plugin.
The scrollspy plugin automatically highlights the navigation links based on the scroll position to indicate where the user is currently on the page. Here is an example.
As we scroll down the page, the respective navigation links in the navigation bar are automatically highlighted.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Bootstrap tutorial for
begineers</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="CustomStyles.css" rel="stylesheet" />
<style type="text/css">
body {
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target="#mainNavBar" data-offset="10">
<nav id="mainNavBar" class="navbar navbar-inverse
navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse
collapse">
<ul class="nav
navbar-nav">
<li class="active"><a href="#divDesert">Desert</a></li>
<li><a href="#divLighthouse">Lighthouse</a></li>
<li><a href="#divTulips">Tulips</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Animals <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#divJellyfish">Jellyfish</a>
</li>
<li>
<a href="#divPenguins">Penguins</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div id="divDesert" class="divStyle">
<h1>Desert</h1>
<img src="Images/Desert.jpg" class="img-responsive" />
</div>
<div id="divLighthouse" class="divStyle">
<h1>Lighthouse</h1>
<img src="Images/Lighthouse.jpg" class="img-responsive" />
</div>
<div id="divTulips" class="divStyle">
<h1>Tulips</h1>
<img src="Images/Tulips.jpg" class="img-responsive" />
</div>
<div id="divJellyfish" class="divStyle">
<h1>Jellyfish</h1>
<img src="Images/Jellyfish.jpg" class="img-responsive" />
</div>
<div id="divPenguins" class="divStyle">
<h1>Penguins</h1>
<img src="Images/Penguins.jpg" class="img-responsive" />
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
| Scrollspy Configuration | |
|---|---|
| data-spy="scroll" | This attribute is appliied on the element that is being spied on. In most cases this is the body element |
| data-target="#mainNavBar" | This attribute links the scrollable element (body element) with the navigation element (navbar). This attribute is also applied on the body element in most cases |
| data-offset="10" | Specifies the number of pixels to offset from top when calculating the position of scroll. This is extremely useful to control when the navigation links should be highlighted as the page is being scrolled. This attribute is optional and the default is 10 pixels |
| The navigtion menu items are linked to the scrollable sections on the page, by making the href attribute of the navigation item point to the id of the scrollable section | |
| The element with data-spy="scroll" requires the CSS position to be relative | |
No comments:
Post a Comment
It would be great if you can help share these free resources