你如何制作一个固定的，敏感的侧边栏？

Question

这个网站有一个漂亮的侧边栏：http://thenextweb.com/ 我知道如何在css中制作一个固定的侧边栏，但是让它在某一点停止滚动就是我迷失的地方。并且让它以一定的宽度消失是我认为的媒体查询？

Answer 1

试试这个脚本

    <script>

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

   });



});

其中page是包装元素

Answer 2

我创建了一个CodePen，其侧边栏已固定在相关容器中。

您可以在此处查看：http://codepen.io/tomanagle/pen/vGaEvG

至于让它在某个断点消失。使用媒体查询。

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

您还可以使用一个库来制作粘性边栏：http://leafo.net/sticky-kit/