html - 固定された応答性の高いサイドバーをどのように作成しますか?

Question

この Web サイトには美しいサイドバーが あります。そして、それを一定の幅で非表示にすることは、メディアクエリだと思いますか?

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/