サイドバーのメニュー下の広告

サイドバーのメニュー下に、広告を配置。スクロールしていくと、広告部分だけが残る、いわゆる追尾方広告とか言われるスタイル。

今回は jQuery を使って、広告のセクション（.fix_container）に、新たに .fixedというクラスを追加して、上部に固定させるタイプ。

問題点

通常使用には問題なし、意図したとおりに広告セクションが表示し続ける。しかし、アコーディオンメニューとの組み合わせで問題が発生する。

アコーディオンメニューを開いた状態でスクロールすると、意図しない位置で（開いたメニューに被った位置）で、広告セクションが固定されてしまう。

原因

先ずは、今回のスクリプト。非常に単純なもの。

$(function(){
　　var fixbox = $('.fix_container');
　　var offset = fixbox.offset().top;
　　$(window).scroll(function () {
　　　　if($(window).scrollTop() > offset -20) {
　　　　　　fixbox.addClass('fixed');
　　　　} else {
　　　　　　fixbox.removeClass('fixed');
　　　　}
　　});
});

なんか変だけど、結局は、offset().topで、('.fix_container')の座標を取得している。この取得した座標は、ドキュメント上の絶対位置に当る。

アコーディオンメニューを開くことで、実際の表示と、取得した座標がズレが生じる。そしてスクリプトは、そのまま取得している座標を基準に動くことで、上記の問題が発生する。

当該部分のCSS

.side-container section {
　　padding: 0;
　　margin: 0 0 50px 0;
}
.fix_container{
　　width: 300px;
　　margin: 0 auto;
}
.fixed{
　　position: fixed;
　　top: 20px;
}
.move_container{
　　width: 300px;
　　margin: 0;
}

なんとなく・・・・・・

var offset = fixbox.offset().top; で取得した offset の変更とか再取得とかを考えたのだが・・・・無理みたい？