position: fixed で固定しているヘッダーを横スクロールさせる【たったの3行】

1

こんにちは、「最近色々とやりたいことが増えてきて完全に時間が足りないマン」と化している愛原です。

電子工作やアマチュア無線やプログラミングや英語や格闘技、更にはウクレレやドローンなど、興味が留まることなく、毎晩脳汁で枕を濡らしています。

そんな瀕死の僕が最後の力を振り絞ってお伝えしたいことは….

「position: fixed で固定しているヘッダーが横スクロールしてくれない」問題の解決方法をお伝えしたい、ただそれだけです。それだけなの…..

それではさっそく本題へ Here We Go !

 

 

まずは事象を確認

こちらに例を用意しました。

img01

 

よくあるワンカラムのレイアウトですね。

特徴はヘッダー部分を「position: fixed」で固定しているくらいです。

幅を縮めた際に、当然こうなります。

img02

 

幅を1000pxで固定しているため、横スクロールがでますね。

ここまでは特に問題ないと思います。

しかし、問題はここからです….。

この横スクロールを右にずらすと…..

img03

 

「違う~違う~そうじゃ~そうじゃない~」

すみません….あまりのショックで思わずマーチンこと、鈴木雅之さんの名曲「違う、そうじゃない」を口ずさんでしまいました。(知らない人はお母さんに聞いてみよう!)

…どうやら、leftを0pxにしているために、ヘッダーが左端で固定されてしまっているのが原因です。

本来表示されるべき「menu03」「menu04」が見れません。

これ…どうしたらいいの?(涙)

 

 

解決方法は「jsで無理くり動かす」です!

絶望の淵に立たされた愛原ですが、解決策はとてもシンプルでした。(ドンッ!)

そう、Javascriptで解決できます。(ドドンッッ!)

※なお今回はjQueryで記述してますが、当然ネイティブなjavascriptでも解決できます!(ドドドンッッッ!)

こちらの、たった3行のコードをぶち込むことで解決します!

簡単に解説すると、0に指定されているleftの値を横スクロールの量だけ動的に上書くことで、

leftが左端に固定されず、スクロールできるようになります!ワーイワーイ

css、余裕。完全にマスターしたわ。

 

 

まとめ

いかがでしたでしょうか?

cssだからといって侮ることなかれ、簡単なように見えてもcssはとても奥が深いようです。

この記事を見ているあなたの参考になれば幸いです!

それではッ

Share on Facebook0Tweet about this on TwitterShare on Google+0Email this to someone