Twitter-bootstrap 3 affixed sidebar overlapping content when window resized and also footer

Question

I am having problems with an overlapping sidebar when I use affix for bootstrap 3 and resize the window. Is there a way to add some css class so that instead of overlapping

Answer 1

Demo: http://bootply.com/104634

You should only apply the affix when the screen width is larger that 992 pixels (the breakpoint at which Bootstrap col-md-* starts vertically stacking).

.affix-top,.affix{
    position: static;
}

@media (min-width: 992px) {

  #sidebar.affix-top {
  position: static;
  }

  #sidebar.affix {
  position: fixed;
  top: 100px;
  }
}

Also, if you want to use the affix on smaller widths you could change your columns to col-sm-* or col-xs-*.