「position: fixed」でスクロール固定したヘッダーを横にスクロールさせる

 

 Web技術

ヘッダーを「position: fixed」にて実装しているサイトなどで
コンテンツの横幅が決まっている場合、
コンテンツ幅よりもブラウザを縮めてサイトを閲覧した際に不具合が生じます。

コンテンツ部分はブラウザ幅以上の部分に関しては横スクロールで見れるのですが、
「position: fixed」を実装しているヘッダーは横スクロールしてくれません。

 

ですがそれを解消するための方法がありました。

jQueryで強制的に動かす

jQuery

CSSの例

ヘッダーとコンテンツ部分どちらも横スクロールします。

「$(window).scrollLeft()」でブラウザのスクロール位置を取得しています。
マイナスをつけることで逆方向へ移動させます。


▼参考にさせていただきました。ありがとうございました。

「position: fixed」でスクロール固定したグローバルメニューが横にスクロールしてほしい時の対処法

 この記事の投稿者

アバター画像

taka

Webサイト作ってます。
最近のモットー「決して無理をしないスタイル」

twitter: @taka_sbs

  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

ページ最上部へ