サイドバーを有効活用する一番いい方法

公開日: : 最終更新日:2015/04/20 PHP

jQuery

ウェブサイトで、
スクロールしていくと
サイドの内容が追尾してくる構造というのは
最近では当たり前にみられるようになってきましたね。

それで、私も実装したいなぁ〜と
Wordpressのプラグインを試したり、
jQueryのライブラリーを試したり。

結局これにたどり着きました。
少し問題もあるのですが….
(メインカラムの内容が短すぎると、うまく作動しない…)

2015.04.20 -追記
結局この問題がネックでプラグイン『Standard Widget Extensions』を使い始めました。
[Wordpress]サイドを追尾させるプラグイン『Standard Widget Extensions』が簡単でかなり使いやすい。



実装方法ですが、詳しくは上記参考サイトへ。
すごく分かりやすいです。
そして、ありがとうございます!

ここは私のためのメモとして書いておきます。

まずはjQuery本体を読み込み。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


フッターのidは( footer
サイドバーのidは( sidebar
固定しておきたい部分のclassは( fix_box )にしておくこと。

簡単に書いておくと、

<div id="sidebar"><!-- サイドバーはこれでくくっておく -->
 <div class="fix_box">サイドの固定させたい部分</div>
</div>

<div id="footer">フッターの内容</div>


そして、以下のコードを記述。

<script>
$(function(){
	var contentHeight = $("html, body").height();
	var windowHeight = $(window).height();
	var target = $(".fix_box");
	var targetHeight = target.outerHeight();
	var targetPosition = target.position();
	var footer = $("#footer");
	var footerHeight = footer.outerHeight();
	$(window).resize(function(){
		windowHeight = $(this).height();
	});
	$(window).scroll(function(){
		var scrollTop = $(this).scrollTop();
		var visibleBottom = scrollTop + windowHeight;
		var targetBottom = targetPosition.top + targetHeight;
		if(visibleBottom >= targetBottom) {
			if(footerHeight > contentHeight - visibleBottom) {
				target.css({position:"fixed", bottom: footerHeight - (contentHeight - visibleBottom)});
			} else {
				target.css({position:"fixed", bottom: 0});
			}
		} else {
			target.css({position:"static", bottom: "auto"});
		}
	});
});
</script>


これだけ。
簡単便利。

本当に感謝です。

ad

関連記事

Web

エックスサーバーで、phpをhtml拡張する方法

完全にメモですが。 エックスサーバーにて、phpをhtml拡張する方法。 私は、in

記事を読む

instagram(インスタグラム)

インスタグラムの写真をサイトに表示させるときの写真サイズの変更方法

現在、自サイトをレスポンシブルへと変更中です。 それに伴い、インスタグラムの写真をサイトへ表示

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP ↑