サイドバー等を固定位置に配置・自動追尾させてみた。

サイドバー等を固定位置に配置・自動追尾させてみた。

ホームページやブログ等で、サイドバー等を自動追尾させるやつをよく見かけますが、以前から試してみたかったのでやってみました。

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2.  
  3. <script>
  4. $(function($) {
  5.     var tab = $("#sidebar"),
  6.     offset = tab.offset();
  7.  
  8.     $(window).scroll(function () {
  9.     if($(window).scrollTop() > offset.top) {
  10.         tab.addClass("fixed");
  11.     } else {
  12.         tab.removeClass("fixed");
  13.     }
  14.   });
  15. });
  16. </script>

インデントがおかしいかも・・・
5行目、今回は#sidebarとしましたが、ここに固定したいパーツのidやclassを入れます。
さしあたってheadタグ内に上記をねじ込んで、スタイルシートに下記を追加してみました。

  1. .fixed {
  2.     position:fixed;
  3.     top:20px;
  4. }

意外と簡単なんですね。
以下のブログが非常に参考になりました。
ありがとうございます。

via:[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する | OZPAの表4

via:【ブログ術】人気記事を見て!サイドバー固定して自動追尾する方法 | ゆめぴょんの知恵

  • このエントリーをはてなブックマークに追加

『naouniverse.com』では、管理人が気になるモノ・コト・セカイについて、つらつらと書いています。
ガジェット・カメラ・デザイン・プログラミング・L'Arc~en~Cielなどなど・・・