More than 5 years have passed since last update.

jQueryで作る、スクロール時に追いかけてくるサイドバー

Last updated at 2016-12-31Posted at 2016-12-31

webサイトのサイドバーが固定されているのではなく、追いかけてくるモノを作る機会に恵まれたため作ってみました。

まず、jQueryが使えてサイドバーのあるテンプレートを作ります。(※複数ファイルの記述をするのが面倒なのでhtmlファイルに全て突っ込んでいます。)

index.html


<!DOCTYPE html>
<html lang="ja">
<body>
  <div style="width:10%;float:left;background-color:red" id="sidebar">
    <div id="sidebar_menu">
      <ul>
        <li>サイド</li><li>サイド</li><li>サイド</li>
      </ul>
    </div>
  </div>
  <div style="width:75%;float:left;background-color:green;">
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
  </div>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
});
</script>
</html>

サイドバーは赤色、メインは緑色の背景色にしてあります。

jsのソースコードは
$(function(){
});
の中に書いていきます。

まず、スクロールした時にイベントが起きるようにします。


$(function(){
 $(window).scroll(function(){
  console.log("スクロール");
 });
});

これで、スクロールするとコンソールに「スクロール」という文字が出力されるようになります。

次に、スクロールした位置を取得します。

$(function(){
  $(window).scroll(function () {
    var ScrollPoint = $(window).scrollTop();
    console.log("スクロール:"+ScrollPoint);
  });
});

スクロールさせると、「スクロール」の後に位置を表す数字が表示されるようになりました。

次は、スクロールの位置を表す数字をサイドバーの位置に反映させたいと思います。

$(function(){
  $(window).scroll(function () {
    var ScrollPoint = $(window).scrollTop();
    $('#sidebar_menu').css('padding-top',ScrollPoint+'px');
  });
});

$('#sidebar_menu').css('padding-top',ScrollPoint+'px');
はidがsidebar_menuのタグにCSSを適用しています。

この時点でスクロールした際にサイドバーがついてくるようになりました。
しかし、スクロール結果の位置にいきなりくるのでついてくるというより、固定されているようになってしまっています。

次は、追ってくるように見せるために位置の数値を＋１づつしてサイドバーを動かします。

var oldScrollPoint =0;
$(function(){
  $(window).scroll(function () {
    var ScrollPoint = $(window).scrollTop();
    $('#sidebar_menu').css('padding-top',ScrollPoint+'px');

    while(oldScrollPoint!=ScrollPoint){
      var scrollDifference = oldScrollPoint > ScrollPoint?(-1):1;
      $('#sidebar_menu').css('padding-top',(oldScrollPoint+=scrollDifference)+'px');
    }
  });
});

これで、固定から追ってくるように動くようになりました。
しかし、動きが速すぎてかなり早く動かさないとまだ、固定されているように見えてしまいます。
必ず追ってきているのがわかるように動き出しを１秒待つようにします。


var oldScrollPoint =0;
$(function(){
  $(window).scroll(function () {
    var ScrollPoint = $(window).scrollTop();
    setTimeout(function(){
      while(oldScrollPoint!=ScrollPoint){
        var scrollDifference = oldScrollPoint > ScrollPoint?(-1):1;
        $('#sidebar_menu').css('padding-top',(oldScrollPoint+=scrollDifference)+'px');
      }
    }, 100);
  });
});

これで、追ってくるサイドバーが完成しました。

完成版ソース

index.html


<!DOCTYPE html>
<html lang="ja">
<body>
  <div style="width:10%;float:left;background-color:red" id="sidebar">
    <div id="sidebar_menu">
      <ul>
        <li>サイド</li><li>サイド</li><li>サイド</li>
      </ul>
    </div>
  </div>
  <div style="width:75%;float:left;background-color:green;">
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
    <div>main</div><div>main</div><div>main</div><div>main</div><div>main</div>
  </div>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var oldScrollPoint =0;
$(function(){
  $(window).scroll(function () {
    var ScrollPoint = $(window).scrollTop();
    setTimeout(function(){
      while(oldScrollPoint!=ScrollPoint){
        var scrollDifference = oldScrollPoint > ScrollPoint?(-1):1;
        $('#sidebar_menu').css('padding-top',(oldScrollPoint+=scrollDifference)+'px');
      }
    }, 100);
  });
});
</script>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up