2013/09/05
サイドバー等を固定位置に配置・自動追尾させてみた。
ホームページやブログ等で、サイドバー等を自動追尾させるやつをよく見かけますが、以前から試してみたかったのでやってみました。
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
- <script>
- $(function($) {
- var tab = $("#sidebar"),
- offset = tab.offset();
- $(window).scroll(function () {
- if($(window).scrollTop() > offset.top) {
- tab.addClass("fixed");
- } else {
- tab.removeClass("fixed");
- }
- });
- });
- </script>
インデントがおかしいかも・・・
5行目、今回は#sidebarとしましたが、ここに固定したいパーツのidやclassを入れます。
さしあたってheadタグ内に上記をねじ込んで、スタイルシートに下記を追加してみました。
- .fixed {
- position:fixed;
- top:20px;
- }
意外と簡単なんですね。
以下のブログが非常に参考になりました。
ありがとうございます。
