はてなブログのデザイン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>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2017/03/04 15:16:47
  • 終了:2017/03/04 19:38:03

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4545ベストアンサー獲得回数18952017/03/04 17:39:50

例えば、こんな感じ。

$(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;
}
id:LikeLife

CSSで記述できるのですね、わかりやすい解説ありがとうございました!

2017/03/04 19:38:13

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません