33

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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Sohag-Monist It
  • 339
  • 1
  • 3
  • 4
  • 1
    Possible duplicate of: http://stackoverflow.com/questions/19099325/bootstrap-3-vertical-menu-example-as-used-in-the-documentation-resizing-issue/19144753#19144753 – Carol Skelly Oct 30 '13 at 12:21
  • 5
    if you've "got it" you should answer the question to help others. – Rich Tier Jan 30 '14 at 21:13
  • You may find one of the sticky left sidebar menu from these collections http://www.designerslib.com/bootstrap-sidebar-menu-templates/ – Karuppiah RK Apr 04 '16 at 19:08

3 Answers3

49

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?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 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 ? – Ankit Suryawanshi Mar 31 '15 at 06:07
  • Add something like this to the anchor points (h2) `#mainCol h2 {padding-top: 55px; margin-top: -55px;}` http://codeply.com/go/chA684SPpu – Carol Skelly Mar 31 '15 at 09:53
6

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.

disco crazy
  • 31,313
  • 12
  • 80
  • 83
5

I used this way in my code

$(function(){
    $('.block').affix();
})
Evgeniy
  • 2,915
  • 3
  • 21
  • 35
  • Using javascript/jquery where it isn't necessary is a terrible idea, when it can be solved with CSS. – Wade Apr 18 '15 at 20:25
  • 1
    @WadeShuler, its impossible to resolve it without JS as you have to toggle `.fixed` class according page scroll – Evgeniy Apr 19 '15 at 07:19
  • 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. – Wade Apr 19 '15 at 14:12
  • 2
    @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' – Evgeniy Apr 20 '15 at 06:13