Bootstrap Scrollspy

Mimicking Bootstrap Documentation Sidebar by Eric on February 1, 2020

If you've spent any time looking at the Bootstrap docs you'll notice their nav bar on the right.  Very slick example of both Scrollspy and Affix.  I have written blog posts about both of these topics in conjunction with each other titled Bootstrap ScrollSpy Pitfalls and Fixes.  In my example I use a very simple styling for my nav using nav-pills.  This works out alright but what if we want to get exactly what Bootstrap is doing?  Well, let's figure out just how they do it. They are using very similar code to what I had in the pitfalls and tricks post so I'll bring that in here.<div id="side-nav" class="col-sm-2 hidden-xs hidden-sm hidden-print affix"> <ul class="nav"> <li><a href="#info">Info</a></li> <li><a href="#properties">Company Properties</a></li> <li><a href="#genome">Buyers/Suppliers</a></li> <li><a href="#blog">Recent Blog</a></li> <li><a href="#tests">Total Tests</a></li> <li><a href="#company-bio">Company Bio</a></li> ...

Bootstrap ScrollSpy Pitfalls and Fixes by Eric on February 1, 2020

![](/img/menu-title-300x221.png) Designing our new internal marketing tools has been a pet project of mine for a couple of weeks now.  I spend a little time here and there adding information and tools for our employees to better understand our relationship with our clients.  I'm displaying basic contact information, some information on the kind of business we do with them, a log of notes we take, past business, and company information.  All of that equates to a rather long page of information.  All of the information is relevant and displayed in an attractive compact manner the problem is it is just so much information that it can be overwhelming.  I showed it to a coworker and he wanted tabs to flip between the various bits of information because he found it overwhelming.  I didn't want to go to tabs because of the increased difficulty that would be added when they wanted to print off the marketing information and I didn't feel that tabs were the right way to go here.  With that i...