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

 

 Web技術

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

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

 

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

jQueryで強制的に動かす

jQuery

CSSの例

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

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


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

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

 この記事の投稿者

taka

taka

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

twitter: @taka_sbs

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

メッセージ

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

*コメント

*名前

ページ最上部へ