追随、追尾型の広告やメニュー等に使いたい!
jquery javascript
footerは下のフッターのクラス名やid、footerタグなど広告タグ手前に
.fixed-itemは実際広告を入れているクラス名などを入れる
$(function(){
var target = $(".fixed-item");
var footer = $("footer")
var targetHeight = target.outerHeight(true);
var targetTop = target.offset().top;
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
if(scrollTop > targetTop){
// 動的にコンテンツが追加されてもいいように、常に計算する
var footerTop = footer.offset().top;
if(scrollTop + targetHeight > footerTop){
customTopPosition = footerTop - (scrollTop + targetHeight)
target.css({position: "fixed", top: customTopPosition + "px"});
}else{
target.css({position: "fixed", top: "10px"});
}
}else{
target.css({position: "static", top: "auto"});
}
});
});
参考はコチラ→http://select-aster.com/web/auto-tracking-sidebar/