How to create a sticky left sidebar menu using bootstrap 3?
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.
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?
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.
I used this way in my code
$(function(){
$('.block').affix();
})