Make scrolling sidebar stop at footer

Question

I\'m currently using the following:

http://jsfiddle.net/0mLzseby/469/

To make my sidebar follow down the page. I have quite a large footer though and I\'d li

Answer 1

You don't need to use javascript for this. You can do this using CSS only:

position: sticky;

body{
  padding: 0 20px;
}
#content {
  height: 1200px;
}
header {
  width: 100%;
  height: 150px;
  background: #aaa;
}
main {
  float: left;
  width: 65%;
  height: 100%;
  background: #444;
}
aside {
  float: right;
  width: 30%;
  height: 500px;
  position: sticky;
  top: 100px;
  background: #777;
}
footer {
  width: 100%;
  height: 300px;
  background: #555;
}

  
Header
  

    
Content
    
Sidebar
  
  
Footer