How to create a sticky left sidebar menu using bootstrap 3?

Question

I want to create a left-sticky bar menu with bootstrap 3 like:

http://getbootstrap.com/getting-started/

I'd read the given documentation http://getbootstrap.com/javascript/#affix

I try with .affix but the result is zero.

---

Update: @Skelly,
Thanks for your kind example. and yes, I want like your example. I'd download your example html, but after download the html file's side bar didn't work there.

Answer 1

Bootstrap 3

Here is a working left sidebar example:

http://bootply.com/90936 (similar to the Bootstrap docs)

The trick is using the affix component along with some CSS to position it:

  #sidebar.affix-top {
    position: static;
    margin-top:30px;
    width:228px;
  }

  #sidebar.affix {
    position: fixed;
    top:70px;
    width:228px;
  }

EDIT- Another example with footer and affix-bottom

---

Bootstrap 4

The Affix component has been removed in Bootstrap 4, so to create a sticky sidebar, you can use a 3rd party Affix plugin like this Bootstrap 4 sticky sidebar example, or use the sticky-top class is explained in this answer.

Related: Create a responsive navbar sidebar "drawer" in Bootstrap 4?

Answer 2

You can also try to use a Polyfill like Fixed-Sticky. Especially when you are using Bootstrap4 the affix component is no longer included:

Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead.

Answer 3

I used this way in my code

$(function(){
    $('.block').affix();
})