モバイル版のヘッダーのみ最上部固定にしたい

PR 2017/1/13

このトピックには2件の返信、2人の参加者があり、最後ににより2年、 2ヶ月前に更新されました。

2件の返信スレッドを表示中

投稿者

投稿
- 2017年1月13日 8:25 PM #49452
  
  kaz
  ゲスト
  
  http://kazzblog.com
  スマホのページのみ、画面の一番上にヘッダーが固定されるようにしたいのですが…
  どうかアドバイスをよろしくお願いしますm(_ _)m
- 2017年1月14日 2:08 AM #49458
  
  Hidekichi
  ゲスト
  
  通常、cssでposition: fixedにすれば固定というのが定石ですが、現在のSimplicityではそれが効きません。
  効くようにするには、viewportにuser-scalable=noをつけるのがひとまずの解決方法です。
  
  ＜meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  ※ 403がでるので先頭の<だけ全角になってます
  
  そもそもスマホの画面はただでさえ狭いのでposition: fixedで何かしらを固定するのはあまりおすすめできないということからfixedが効かないようになっているわけですが、拡大縮小をさせないということになればそれらの操作を待つ機能がキャンセルされるためタップの応答速度も若干早くなるかと思います。
  
  ユーザビリティを考えるなら拡大縮小はさせるようにしておくべきでしょうから、固定を諦めるのが良いかと思います。固定を優先させるなら拡大縮小をさせないようにするか、固定ではなく追従でjQueryで対応するかでしょうか。
- 2017年1月14日 8:42 PM #49476
  
  わいひら
  キーマスター
  
  Clingifyという、jQueryプラグインを使うと、ある程度手軽に実装出来るかもしれません。
  以下は、グローバルメニューの例ですが、指定する要素をヘッダーにして、モバイルだけで動作するように条件分岐すればできるかと思います。
  スクロール追従型のグローバルメニューを簡単に実装できる「Clingify」の使い方
投稿者

投稿

2件の返信スレッドを表示中

フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。