Scrollspy (Bootstrap)

<style> .scrollspy .nav li { background: #6dc0e6; margin-bottom: 10px; } .scrollspy .nav li.active { background: #cc6de6; } </style> <!-- Add this on body --> <body data-spy="scroll" data-target=".scrollspy"> <!-- Button area --> <section class="scrollspy col-md-3"> <!-- .affix sets fixed positioning --> <ul class="nav nav-list affix"> <li><a href="#target_1">Link 1</a></li> <li><a href="#target_2">Link 2</a></li> <li><a href="#target_3">Link 3</a></li> </ul> </section> <!-- Content area --> <section class="col-md-9"> <article id="target_1" class="media"> <h2>Title</h2> <p>Content</p> </article> <!-- Repeat for the rest of the content --> </section> </body>

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.