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

Question

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

Answer 1

试试这个脚本

    <script>

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

   });



});

页面是包装元素

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/