グローバルナビを固定にしたのですが、表示がおかしい

質問

いつもお世話になっております
表題のとおり、

以下サンプルサイトの
グローバルナビを固定にしたのですが、表示がおかしいです
http://gcgtokyoroom.com/yk/

グローバルナビはしっかり付いてくるようになりましたが、
サンプルjs
http://www.webdlab.com/template/fixednav/

一旦トップに戻ると
#mainImg部分が全て表示されなくなります、、、

恐らくcssの問題だと思うのですが、
正直あまりcssが分からず困っております。

ご教授お願いします、、、

回答No.1

ixkaito

jsにすこし問題があります。

元々の#blocknavにはpositionが指定されていない（初期値のstaticになっている）が、スクロールするとjsによって初めてナビにposition: fixed;が指定されるため。positionにabsolute、fixedと指定すると、先祖要素、兄弟要素にその幅と高さが計算されなくなりますので、#mainImgにナビの高さ分のマージンを入れてあげる必要があります。

そもそも、トップにナビを固定するのみでしたら、jsを使う必要がありません。
そのjsを切って、cssに下記を追加すればナビが固定されます。
（#mainImgのトップマージンは適当に変更してください）

#blocknav{position:fixed; top:0; left:0; width:100%; background:#fff; z-index:999;}
#mainImg{margin-top:160px;}

どうしてもjsを使いたい場合は、if (winTop >= navTop) {　この間に下記を追加してください。　}
「160」の部分はcss同様ナビに合わせて調整してください。

$('#mainImg').css('margin-top','160px');

このスクリプトを使うメリットとしては、ウィンドウの高さがナビより低い場合、ナビを固定しないことです。
160pxより低いモニターというのもなかなかないと思いますが…