スクロールしてフッターで止まる、下揃いのサイドバー

Javascript

前回作ったものの今度は下にピタッとくっつくタイプです。

どちかというとこちらのタイプの方がよく見ます。よく広告を設置してる箇所で見ますね。

IE6には非対応

こちらのタイプはIE6に対応するのが大変そうだったので、IE7から動きます。

いろいろなサイトを見てると、古いブラウザだとこのスクロールしてついてくる機能を対応させていない所が多いようです。

JavaScriptのソース

こちらも相変わらずソースが変かと思いますが・・・。

$(function(){

	//固定する要素
	var box = $('#nav');
	//上の間隔
	var topMarge = box.offset().top;
	//下の間隔調整用
	var bottomMarge = 0;

	//////////////////////////////////////////
	var footerOffset = $("#footer").offset();

	$(window).bind('scroll resize load ',function() {
		var scrollOffset = $(this).scrollTop() || document.body.scrollTop;
		fixedStart(scrollOffset);
		fixedEnd(scrollOffset);
		fixedNo(scrollOffset);
	});

	//////////////////////////////////////////
	//スクロール時
	function fixedStart(scrollOffset){
		var winSize = $(window).width();
		var winBottom = $(window).height();
		var contentWidth = $('#wrap').width();
		var leftPos = $(window).scrollLeft()*(-1);

		var leftScroll = (winSize - contentWidth)/2;
		if(winSize < contentWidth){
			leftScroll = leftPos;
		}

		if(scrollOffset + topMarge + winBottom > box.height()) {
			box.css({
				"position": "fixed",
				"bottom": 0,
				"left": leftScroll,
				'float': 'none'
			});
		};
	};

	//////////////////////////////////////////
	//下までいった時
	function fixedEnd(scrollOffset){
		if((scrollOffset + $(window).height()) > footerOffset.top) {
			box.css({
				"position": "fixed",
				"bottom": (scrollOffset + $(window).height())-footerOffset.top,
				'float': 'none'
	        });
	 	};
	};

	//////////////////////////////////////////
	//上に戻った時
	function fixedNo(scrollOffset){
		var winBottom = $(window).height();
		if(scrollOffset == 0){
			box.css({
					"position": "relative",
					"left": 0,
					'float': 'none'
	        });
		};
	};

});