您如何制作固定的响应式侧边栏？

Question

This website has a beautiful sidebar: http://thenextweb.com/ I know how to make a fixed sidebar in css, but making it stop scrolling at a certain point is where I'm lost. And making it disappear at a certain width is a media query I think?

Answer 1

Try this script

    <script>

$(document).ready(function(){
  $('#page').scroll(function(){
     if(document.getElementById("page").scrollTop > 100) {
       $('#sidebar').css("position","fixed");
     }

   });



});

Where page is the wrapper element

Answer 2

I made a CodePen with a sidebar that is fixed in its related container.

You can see it here: http://codepen.io/tomanagle/pen/vGaEvG

As for making it disappear at a certain breakpoint. Use a media query.

@media screen and (max-width: 1280px){
  aside{
    display: none;
  }
  #article{
    margin: auto;
    float: none;
  }
}

There is also a library you can use to make sticky sidebars: http://leafo.net/sticky-kit/