Skip to content

Instantly share code, notes, and snippets.

@yasuhiro-matsuda yasuhiro-matsuda/scroll.js
Last active Sep 16, 2015

Embed
What would you like to do?
STINGER5のscroll.jsで動的なサイズ変更に対応させる
/*--------------------------------
広告のフロート
-------------------------------*/
// jQueryの開始方法を変更
$(function() {
/*
Ads Sidewinder
by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder
*/
var main = $('main'); // メインカラムのID
var side = $('#side aside'); // サイドバーのID
var wrapper = $('#scrollad'); // 広告を包む要素のID
// 要素がなければ何もしない
if (main.length === 0 || side.length === 0 || wrapper.length === 0) {
return;
}
var w = $(window);
var wrapperHeight = wrapper.outerHeight();
var wrapperTop = wrapper.offset().top;
var sideHeight = side.outerHeight();
var sideTop = side.offset().top;
var sideLeft = side.offset().left;
var sideMargin = {
top: side.css('margin-top') || 0,
right: side.css('margin-right') || 0,
bottom: side.css('margin-bottom') || 0,
left: side.css('margin-left') || 0
};
var winLeft;
var pos;
var scrollAdjust = function() {
// サイドバーかスクロール広告の高さが変わっていたら更新する
// 広告が浮いてる状態で高さが更新されるとwrapperTopにズレが発生する可能性あり
if (sideHeight != side.outerHeight() || wrapperHeight != wrapper.outerHeight()) {
sideHeight = side.outerHeight();
wrapperHeight = wrapper.outerHeight();
wrapperTop = wrapper.offset().top;
}
var mainHeight = main.outerHeight();
var mainAbs = main.offset().top + mainHeight;
var winTop = w.scrollTop();
winLeft = w.scrollLeft();
var winHeight = w.height();
// スクロール広告の頭が画面上部からはみ出そうで、メインコンテンツがサイドバーが長い=広告を浮かす必要がある
var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false;
// スクロール広告の頭からサイドバーが終わるまでの高さ
var wrapperTop2SideBottomHeight = sideHeight - (wrapperTop - sideTop);
/**
* 浮かす必要が無いならstaticでそのまま。
* 画面上部の高さ+広告以下の高さを合わせて、コンテンツの高さを超えるならabsoluteで終端を揃える。
* それ以外はfixedで広告の頭を固定で浮かして表示する。
*/
pos = !nf ? 'static' : (winTop + wrapperTop2SideBottomHeight) > mainAbs ? 'absolute' : 'fixed';
if (pos === 'fixed') {
/**
* スクロール広告の下にコンテンツ置いても大丈夫なように上基準に変更
* 広告の頭が画面上部に合うように引っ張り上げる。
* サイドバーが開始する高さまでは除去しないとずれる。
*/
side.css({
position: pos,
top: sideTop - wrapperTop,
bottom: '',
left: sideLeft - winLeft,
margin: 0
});
} else if (pos === 'absolute') {
side.css({
position: pos,
top: mainAbs - sideHeight,
bottom: '',
left: sideLeft,
margin: 0
});
} else {
side.css({
position: pos,
marginTop: sideMargin.top,
marginRight: sideMargin.right,
marginBottom: sideMargin.bottom,
marginLeft: sideMargin.left
});
// ずれた時の為に、通常の領域に戻った時に再調整する
wrapperTop = wrapper.offset().top;
}
};
var resizeAdjust = function() {
side.css({
position:'static',
marginTop: sideMargin.top,
marginRight: sideMargin.right,
marginBottom: sideMargin.bottom,
marginLeft: sideMargin.left
});
sideLeft = side.offset().left;
winLeft = w.scrollLeft();
if (pos === 'fixed') {
side.css({
position: pos,
left: sideLeft - winLeft,
margin: 0
});
} else if (pos === 'absolute') {
side.css({
position: pos,
left: sideLeft,
margin: 0
});
}
};
w.on('load', scrollAdjust);
w.on('scroll', scrollAdjust);
w.on('resize', resizeAdjust);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.