Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap scrollspy

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.
bootstrap scrollspy examples

<!DOCTYPE html>
    <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;
<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"
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
            <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>
                        <ul class="dropdown-menu">
                                <a href="#divJellyfish">Jellyfish</a>
                                <a href="#divPenguins">Penguins</a>

    <div class="container">
        <div id="divDesert" class="divStyle">
            <img src="Images/Desert.jpg" class="img-responsive" />

        <div id="divLighthouse" class="divStyle">
            <img src="Images/Lighthouse.jpg" class="img-responsive" />

        <div id="divTulips" class="divStyle">
            <img src="Images/Tulips.jpg" class="img-responsive" />

        <div id="divJellyfish" class="divStyle">
            <img src="Images/Jellyfish.jpg" class="img-responsive" />

        <div id="divPenguins" class="divStyle">
            <img src="Images/Penguins.jpg" class="img-responsive" />

    <script src="">
    <script src="bootstrap/js/bootstrap.min.js"></script>

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

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.