• 締切済み

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

いつもお世話になっております 表題のとおり、 以下サンプルサイトの グローバルナビを固定にしたのですが、表示がおかしいです http://gcgtokyoroom.com/yk/ グローバルナビはしっかり付いてくるようになりましたが、 サンプルjs http://www.webdlab.com/template/fixednav/ 一旦トップに戻ると #mainImg部分が全て表示されなくなります、、、 恐らくcssの問題だと思うのですが、 正直あまりcssが分からず困っております。 ご教授お願いします、、、

みんなの回答

  • ixkaito
  • ベストアンサー率69% (18/26)
回答No.1

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より低いモニターというのもなかなかないと思いますが…

関連するQ&A

専門家に質問してみよう