jQuery.gpFloatを使ってParlletのヘッダーの縦だけ固定しました [公開アプリ]
個人で作成・公開しているアルファ版のWeb家計簿 Parllet（パレット） のヘッダーの縦だけを固定することにしたので、その経緯等について。
Parllet（パレット） は現時点ではスマホからは見れないようにしています。（CSSの勉強不足でレイアウトがボロボロ過ぎるから。。）
多分、レスポンシブデザイン云々・・って方向が正しい感じなんでしょうが私はいいオッサンであることもあり、自分流にしか理解や行動ができないのでゆっくり進めることにします。
将来スマホから見れるようにした時にも、ヘッダーは固定させたいと今は思っています。
「position:fixed」で固定すると、ヘッダーの幅よりブラウザの幅が狭い時に、ヘッダーの端の隠れた部分はずっと見えないままです。（スマホではモロにこれに該当し、Parllet（パレット） では右上の「ログイン」が押せないという状態になる。。）
ので、「縦方向にはヘッダーを固定したいけど、横方向にはスライドさせたい。」となりました。
最初はCSSだけで出来るのかなと思って検索してみましたが出来ないようで、jQuery.gpFloat という便利なjQueryプラグインがあったので使わせてもらい、一応組み込んだ状態を保存しました。
Parllet（パレット） 本体はスマホからは見れませんが、上記の「保存したページ」は一応見れます。
スマホから見ても「position:fixed」と「jQuery.gpFloat」の双方とも効いているようですが、収支明細のグリッドの横スクロールは効かないようです。（現時点でSoftbank HTC Desire HD 001HT と、iPhone4S で見る限り）
デモページ等は本家の方にあるようなので、組み込み方の参考というよりは「jQuery.gpFloat」の一使用例として見て頂ければと思います。
コメント 0