Bootstrap > Scrollspy

Scroll spy with data-attributes in Bootstrap

How to highlight the link based on the scroll position or navigate to the content for which the link was clicked using scrollspy in bootstrap


Scrollspy with data-attribute

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>
  • In the above code snippet we have defined the scroll function of the bootstrap, we have taken nav element to define the scroll spy, in the nav element we have id as navbar-example and class value as navbar navbar-inverse
  • In the next line we are having the class value as 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
  • In the next line we are having the class value as icon-bar in the span element and we defined the anchor tag with class value as navbar-brand with value as SN ITFunda
  • In the next line we are having the div section with the class value as collapse navbar-collapse  and id as navbar-scrollspy, we have defined the list values in the <ul> elements with the values as DotNetFunda, TechFunda and ITFunda
  • In the next line we have created dropdown list for the value ITFunda, we have taken class as dropdown 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 ITFunda
  • After creating the dropdown value we have created the list values in the dropdown using class as dropdown-menu, in the ul element with li element values as offline training and online training 
  • After creating the list values in the dropdown menu we have div section to scroll the given values in the navbar using 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
  • In the next line we are giving heading tag as <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: 586 | Post Order: 55



Write for us