Scrollspy

You can check demo of scrollspy by scrolling down this page and looking at the menu on the right. Vertical bar next to menu indicates which section is beeing disaplyed at the moment.

Note: To make scrollspy work , first you need to add a special attribute to your body tag


<body data-spy="scroll">

Scrollspy example:


   <div id="fixed-sidebar" data-spy="affix" data-offset-top="195">
                    <nav class="scrollspy hidden-xs hidden-sm" id="scrollspy">
                        <ul class="nav nav-pills nav-stacked">
                            <li><a href="#scrollspy">Scrollspy</a></li>
                            <li><a href="#section1">Section 1</a></li>
                            <li><a href="#section2">Section 2</a></li>
                            <li><a href="#section3">Section 3</a></li>
                            <li>
                                <a class="" href="#">Section 4 </a>
                                <ul class="nav">
                                    <li><a href="#section41">Section 4-1</a></li>
                                    <li><a href="#section42">Section 4-2</a></li>
                                </ul>
                            </li>
                            <li><a href="#section5">Section 5</a></li>
                        </ul>
                    </nav>
                </div>

Overlapping footer

To avoid overlapping footer by scrollspy or any other fixed side element follow steps bellow:

1. Place that .div directly before footer


<!--Fixed Sidebar Stop-->
<div class="affix-end"></div>

2. Set an apripriate for your project bottom offset

Example: Settings used by mdbootstrap.com


<nav class="scrollspy hidden-xs hidden-sm" data-offset-top="195" data-offset-bottom="700" id="scrollspy">

3. Place following javascript code in the script section


<script>
        $('#fixed-sidebar').affix({
            offset: {
                top: 0,
                bottom: ($('footer').outerHeight(true) + $('.affix-end').outerHeight(true)) + 30
            }
        });
    </script>

Add the following CSS snippet:


.affix-top {
  position: relative;
  top: 0px;
  width: 150px;
}

.affix {
  top: 170px;
}

.affix,
.affix-bottom {
  width: 150px;
}

.affix-bottom {
  position: absolute;
}

.affix-end {
  height: 10px;
}

#fixed-sidebar .card-panel {
  margin-top: 0;
}

@media only screen and (max-width: 1200px) {
  #fixed-sidebar {
    display: none;
  }
}

@media only screen and (min-width: 1200px) {
  #mobile-sidebar {
    display: none;
  }
}

@media only screen and (max-width: 1450px) {
  .affix-top,
  .affix,
  .affix-bottom {
    width: 300px;
  }
}

Content code:



<div id="section1">    
        <h1>Section 1</h1>
        <p>[...]</p>
</div>
<div id="section2">    
        <h1>Section 2</h1>
        <p>[...]</p>
</div>
<div id="section3">    
        <h1>Section 3</h1>
        <p>[...]</p>
</div>
<div id="section41">    
        <h1>Section 4-1</h1>
        <p>[...]</p>
</div>
<div id="section42">    
        <h1>Section 4-2</h1>
        <p>[...]</p>
</div>
<div id="section5">    
        <h1>Section 5</h1>
        <p>[...]</p>
</div>

Section 1

Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!Try to scroll this section and look at the navigation list while scrolling!