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.

Eggplant

Possible duplicate of: #19099825 – Punke

if you've "got it" you should answer the question to help others. – Lopez

You may find one of the sticky left sidebar menu from these collections designerslib.com/bootstrap-sidebar-menu-templates – Dorren

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?

Punke

Well I am very late to the party, but as your example suggests on bootply, if you have seen, once you click on section 2, the heading is hidden by the top navbar. I am facing the same problem, can you help me with it ? – Crimpy

Add something like this to the anchor points (h2) #mainCol h2 {padding-top: 55px; margin-top: -55px;} codeply.com/go/chA684SPpu – Punke

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.

Airsickness

That plugin is deprecated now, as per the link your provided. – Discomposure

Answer 3

I used this way in my code

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

Ventilation

Using javascript/jquery where it isn't necessary is a terrible idea, when it can be solved with CSS. – Unstressed

@WadeShuler, its impossible to resolve it without JS as you have to toggle .fixed class according page scroll – Ventilation

I skimmed the page at like midnight. The title of this question was about a sticky sidebar, which can be done without any JS using CSS. He linked to a source regarding affix yes. So it depends on whether he is wanting what affix does, or is he really just wanting a sidebar fixed to the side of the page. If he doesn't want/need the benefits of affix and a pure CSS option will do the job, then he doesn't need to use any extra and un-necessary JS. I am a firm believer in keeping the source clean. I do not load any scripts I don't need, and I don't have any code I do not need. – Unstressed

@WadeShuler, absolutlly agree with your points not to use JS in CSS tasks. But affix, bootstrap affix, not just a fixed sidebar, in needs interaction with DOM, as you understand it cant be resolved without JS. We cant be really sure what exactlly author wants to reach, so i've posted documented API way to reach 'sticky bar' – Ventilation