Affixed Sidebar Content in Bootstrap 3

Datetime:2016-08-22 22:22:39          Topic: Bootstrap           Share

We added an affixed Sidebar Menu in NixMash Spring as you can see below. You can view it in action on the demo site .

I searched my blog thinking I posted on this topic years ago but apparently never did. So here’s the post that will save me time the NEXT time I need to add affixed sidebar content in Bootstrap.

We’re going to quickly jump through the HTML, JavaScript, CSS and Thymeleaf used in created the sidebar menu. Remember, all of the code shown is in the GitHub Repo .

The HTML

We’ll start with the sidebar menu HTML within a Thymeleaf fragment. You’ll notice the “sidebar” fragment takes an activeTab parameter. This is passed from the respective Posts page to add an active CSS element to the menu link.

Here we’re passing the activeTab from the Recent Posts page when adding the Thymeleaf Sidebar Fragment.

The CSS

We’ll next get the pertinent CSS out of the way next.

The JavaScript

Finally the JavaScript which uses Bootstrap3 to activate the Affixed Sidebar content and to keep it in position under any content above it when scrolling.

And with that your sidebar menu or other content will stop at 100px from the top of the left column!





About List