こんにちは、「最近色々とやりたいことが増えてきて完全に時間が足りないマン」と化している愛原です。
電子工作やアマチュア無線やプログラミングや英語や格闘技、更にはウクレレやドローンなど、興味が留まることなく、毎晩脳汁で枕を濡らしています。
そんな瀕死の僕が最後の力を振り絞ってお伝えしたいことは….
「position: fixed で固定しているヘッダーが横スクロールしてくれない」問題の解決方法をお伝えしたい、ただそれだけです。それだけなの…..
それではさっそく本題へ Here We Go !
まずは事象を確認
こちらに例を用意しました。
よくあるワンカラムのレイアウトですね。
特徴はヘッダー部分を「position: fixed」で固定しているくらいです。
幅を縮めた際に、当然こうなります。
幅を1000pxで固定しているため、横スクロールがでますね。
ここまでは特に問題ないと思います。
しかし、問題はここからです….。
この横スクロールを右にずらすと…..
「違う～違う～そうじゃ～そうじゃない～」
すみません….あまりのショックで思わずマーチンこと、鈴木雅之さんの名曲「違う、そうじゃない」を口ずさんでしまいました。（知らない人はお母さんに聞いてみよう！）
…どうやら、leftを0pxにしているために、ヘッダーが左端で固定されてしまっているのが原因です。
本来表示されるべき「menu03」「menu04」が見れません。
これ…どうしたらいいの？（涙）
解決方法は「jsで無理くり動かす」です！
絶望の淵に立たされた愛原ですが、解決策はとてもシンプルでした。(ドンッ！)
そう、Javascriptで解決できます。(ドドンッッ！)
※なお今回はjQueryで記述してますが、当然ネイティブなjavascriptでも解決できます！(ドドドンッッッ！)
こちらの、たった3行のコードをぶち込むことで解決します！
|
1 2 3 |
$(window).on("scroll", function(){ $(".hader").css("left", -$(window).scrollLeft()); }); |
簡単に解説すると、0に指定されているleftの値を横スクロールの量だけ動的に上書くことで、
leftが左端に固定されず、スクロールできるようになります！ワーイワーイ
css、余裕。完全にマスターしたわ。
まとめ
いかがでしたでしょうか？
cssだからといって侮ることなかれ、簡単なように見えてもcssはとても奥が深いようです。
この記事を見ているあなたの参考になれば幸いです！
それではッ
0
0