縦長サイトにおいてposition:absoluteで画面垂直方向中央に配置した<div>があり、<div>より下にスクロールした際に<div>が画面上に固定される方法はありますでしょうか?
jQueryやCSS等色々と試してみましたがposition:absoluteで固定している要素を通過した段階でfixedにする方法が分かりませんでした。
jQueryアリならfixedに切り替える必要ないよね。高さから中央の値を出して、条件分岐でabsoluteのまま値を入れてやればいいのでは?
あと完全にPCサイトならいいけど、スマフォからの閲覧も配慮するならfixedとの切り換えは色々と面倒くさいからお勧めしない。
スマホからのアクセスは全く考慮しなくてよかったので切り替えで考えていました。
ttp://web-pc.net/jquery008
このあたりとか試してみたのですが意図する動作にとてもならなかったので…
1、指定のdiv要素を超えたか超えてないかの判別をする2、超えたらdivをfixedに変更するこれでいけなかった?
基本的にはこの動作で問題ないのですが、これをプラグインなどでやってくれるものを探していました。
最近のブログのサイドバーとかでよくあるような、スクロールしても追従してくるやつのことでしょうか?それだったらjQueryでいけるのでは。↓あたりを参考に。
これもダメでした。
基本的にabsouteで固定してあるdivをスクロールしたあとにfixedで変更するという事が出来るプラグインがないのかなと思い始めてきました。。。
みんなの回答 3 件
jQueryアリならfixedに切り替える必要ないよね。
高さから中央の値を出して、条件分岐でabsoluteのまま値を入れてやればいいのでは?
あと完全にPCサイトならいいけど、スマフォからの閲覧も配慮するならfixedとの切り換えは色々と面倒くさいからお勧めしない。
1、指定のdiv要素を超えたか超えてないかの判別をする
2、超えたらdivをfixedに変更する
これでいけなかった?
最近のブログのサイドバーとかでよくあるような、スクロールしても追従してくるやつのことでしょうか?
それだったらjQueryでいけるのでは。↓あたりを参考に。
スクロール時に表示位置を固定するjQueryプラグイン『FixedScroll』を作成しました - ネモウスドットコム
http://nemousucom.hatenablog.com/entry/2012/12/06/093615関連するトピックス