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

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など モバイル版のヘッダーのみ最上部固定にしたい

  • このトピックには2件の返信、2人の参加者があり、最後にTimothymaynCにより2週前に更新されました。
2件の返信スレッドを表示中
  • 投稿者
    投稿
    • #49452 返信
      kaz
      ゲスト

      http://kazzblog.com
      スマホのページのみ、画面の一番上にヘッダーが固定されるようにしたいのですが…
      どうかアドバイスをよろしくお願いしますm(_ _)m

    • #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で対応するかでしょうか。

    • #49476 返信
      Avatar photoわいひら
      キーマスター

      Clingifyという、jQueryプラグインを使うと、ある程度手軽に実装出来るかもしれません。
      以下は、グローバルメニューの例ですが、指定する要素をヘッダーにして、モバイルだけで動作するように条件分岐すればできるかと思います。
      スクロール追従型のグローバルメニューを簡単に実装できる「Clingify」の使い方

2件の返信スレッドを表示中
返信先: モバイル版のヘッダーのみ最上部固定にしたい
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)