上部固定するタイプのグローバルメニューありますね。このブログでも利用しています。
このメニューはだいたいみなさん「position: fixed」にて実装しているのではないでしょうか。
こちらレスポンシブサイトですと問題ないのですが、PCのみのサイトなど、コンテンツの横幅が決まっている場合、ブラウザ幅がそのコンテンツ幅を下回った際に不具合が生じます。
例えば、ウィンドウを複数表示しブラウザを縮めてサイトを閲覧している際など。
コンテンツはブラウザ幅以上の部分に関しては横スクロールで見れるのですが、「position: fixed」の固定メニューは横スクロールしてくれません。
まさにfixedされており一切揺るがない姿勢を貫き通します。
そんな頑固な彼を揺るがす魔法の呪文が以下です。
$(window).on("scroll", function(){
$("fixedしている要素").css("left", -$(window).scrollLeft());
});
jQueryで強制的に動かしております。
Mr. fixedの確固たる意志もjQueryの華麗な手口にはお手上げのようです。
