How To Make A Sticky Sidebar In Bootstrap?

How can I make a sticky sidebar like this one, cpmta.org, but with Bootstrap? I am having a hard time trying to do this...

Solution 1:

It's already there in Bootstrap and it is called Bootstrap Affix. This is the code:

<scripttype="text/javascript">
$(document).ready(function () {
    $("#myNav").affix({
        offset: { 
            bottom: 195 
        }
    });
});
</script>

And you can add the data-spy as well:

<ulclass="nav nav-tabs nav-stacked"data-spy="affix"data-offset-top="195"><liclass="active"><ahref="#one">Section One</a></li><li><ahref="#two">Section Two</a></li><li><ahref="#three">Section Three</a></li></ul>

For more information, kindly follow the instructions from:

• Creating Pinned Element with Bootstrap
• Understanding Bootstrap’s Affix and ScrollSpy plugins