1. TOPページに戻る
  2. Javascript
  3. スクロールしてフッターで止まる、下揃いのサイドバー

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

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

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

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'
});
};
};
});