はてなﾌﾞﾛｸﾞのﾃﾞｻﾞｲﾝCSSに関する質問です｡ｸﾞﾛｰﾊﾞﾙﾒﾆｭｰを固定し､追従させたいのですが､ http://tricoro.hateblo.jp/ ﾒﾆｭｰが記事の背景？に覆いかぶさって…

はてなﾌﾞﾛｸﾞのﾃﾞｻﾞｲﾝCSSに関する質問です｡
ｸﾞﾛｰﾊﾞﾙﾒﾆｭｰを固定し､追従させたいのですが､
http://tricoro.hateblo.jp/
ﾒﾆｭｰが記事の背景？に覆いかぶさってしまい困っております｡どうしたら良いでしょうか？
ﾅﾋﾞ部分のｽｸﾘﾌﾟﾄはこんな感じにしております｡
$(function() {
var nav = $('.navi');
//表示位置
var navTop = nav.offset().top+500;
//ﾅﾋﾞｹﾞｰｼｮﾝの高さ(ｼｬﾄﾞｳの分だけ足してます)
var navHeight = nav.height()+10;
var showFlag = false;
nav.css('top', -navHeight+'px');
//ﾅﾋﾞｹﾞｰｼｮﾝの位置まできたら表示
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
if (showFlag == false) {
showFlag = true;
nav
.addClass('fixed')
.stop().animate({'top' : '0px'}, 200);
}
} else if (winTop <= navTop) {
if (showFlag) {
showFlag = false;
nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
nav.removeClass('fixed');
});
}
}
});
});
</script>

例えば､こんな感じ｡

$(function() {
 var nav = $('.navi');
 ...
 nav.css('top', -navHeight+'px');
 nav.css('z-index', 9999); // これを追加
 ...

入れる場所は､どこでも良いし､top と合わせて､こんな感じでも良いし､

$(function() {
 var nav = $('.navi');
 ...
 nav.css({
 'top': -navHeight+'px',
 'z-index': 9999
 });
 ...

ｽﾀｲﾙｼｰﾄで指定しても良いし｡

.navi {
 z-index: 9999;
}