html - 你如何制作一个固定的、响应式的侧边栏？

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/