PCとスマホのヘッダーを追従型にしたい

Simplicityの特徴 フォーラム 管理者宛の問い合わせ・その他 PCとスマホのヘッダーを追従型にしたい

  • このトピックには13件の返信、2人の参加者があり、最後にしらぬいにより5年、 7ヶ月前に更新されました。
13件の返信スレッドを表示中
  • 投稿者
    投稿
    • #60467
      しらぬい
      ゲスト

      いつもお世話になっております!

      すばらしいテーマをありがとうございます。

      PCとスマホのヘッダーを追従型にしたいのですが、https://repobu.com/2016/10/18/javascript-no/

      こちらの記事を参考にしたところ、スマホのヘッダーのサイズが変わってしまいます。

      PCはヘッダーだけではなく、グローバルナビも同時に追従型にしたいです。

      スマホはヘッダーのサイズを変えずに追従型にしたいです。

      よろしくお願いいたします。

    • #60471
      アバター画像わいひら
      キーマスター

      header.phpの「ヘッダー部分」と「グローバルナビ部分」を「IDをつけたdiv要素」で囲んで、そのIDに対してposition: stickyを行うのが最も手っ取り早いと思います。
      ヘッダー、フッターの固定にposition:sticky使うとCSSだけで完結するし良いかも。 | Ginpen.com

    • #60474
      アバター画像わいひら
      キーマスター

      「IDをつけたdiv要素」で囲むのはこの部分。

    • #60511
      しらぬい
      ゲスト

      わいひらさん ありがとうございます。

      IDで囲むのは出来たのですが、cssでそのIDに対してposition: sticky;というのが

      position: sticky;の部分に!マークが付き、

      Expected (static | relative | absolute | fixed) but found ‘sticky’.と出てしまいます。

      この場合どうすればいいでしょうか。よろしくお願いいたします。

    • #60516
      Akira
      ゲスト

      WordPress の標準エディターをお使いでしょうか。

      もしそうであれば、エディターが sticky を知らないだけです。

      sticky を使っても問題ありません。

    • #60549
      しらぬい
      ゲスト

      わいひらさん Akiraさん お世話になっております。

      div id をheader-koteiでやる場合コチラでよろしいのでしょうか。

      このようにやってみたのですが、追従型にはならずスマホのページの見た目がおかしくなってしまいました。

      div idで挟む場所がおかしいのか、cssがおかしいのかがわかりません。

      よろしくお願いします。

    • #60553
      Akira
      ゲスト

      <div id="header-kotei"> の閉じタグの </div> の位置がおかしいです。

      現在は、こうなっています。

          </div>
      </header>

      これを逆にします。

          </header>
      </div>
    • #60554
      しらぬい
      ゲスト

      Akiraさん ありがとうございます。

      そもそも</div>を書くところを間違っていました。 こちらのように訂正したのですが、

      やはり追従型にはなりませんでした。何が原因でしょうか。

      子テーマのスタイルシートのCSSは前に貼ったものと変わっていません。

      よろしくお願いいたします。

    • #60555
      かうたっく
      ゲスト

      CSS(top、z-index、背景)の指定ができてないからみたいです。

      #hoge {
          position: sticky;
          top: 0;
          z-index: 1;
          background: #fff;
          border-bottom: solid 1px #ddd;
      }

      #hogeは任意のもので。ボーダーは不要ですが、以下はこのサイトでの仕上がりイメージです。

      https://gyazo.com/a076cb317cb8a8fb1f6d43b7ff08e3aa

    • #60556
      しらぬい
      ゲスト

      かうたっくさん ありがとうございます。

      PC画面ではかうたっくさんが書いてくださったコードで

      無事ヘッダーが追従型になったのですが、スマホが反映されません。

      どうすればいいでしょうか。よろしくお願いします。

    • #60563
      かうたっく
      ゲスト

      PC画面ではかうたっくさんが書いてくださったコードで

      無事ヘッダーが追従型になったのですが、スマホが反映されません。

      上記divで囲った領域が違っているのはご確認いただけましたか?もしかしたら、navi領域が入ってないのが原因かもしれないので、一度お試しください。

    • #60566
      しらぬい
      ゲスト

      かうたっくさん お世話になってます

      これで合ってますでしょうか。

    • #60567
      Akira
      ゲスト

      スマホとは、 iOS の Safari のことでしょうか。

      Safari は、ベンダープレフィックスがないと sticky が効きません。

      このように CSS を指定すると、どうなるでしょうか。

      #header-kotei {
        background: #fff;
        box-shadow: 0 4px 8px -3px rgba(17, 17, 17, .06);
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 199999;
      }

      その他に、ブラウザのキャッシュが原因で、 CSS が効いていない可能性もあります。

    • #60570
      しらぬい
      ゲスト

      Akiraさん お世話になっております。

      Akiraさんの貼ってくださったコードで無事解決出来ました!

      いつも本当にお世話になっております。

      わいひらさん Akiraさん かうたっくさん ありがとうございました。

      これからもよろしくお願いいたします。

13件の返信スレッドを表示中
  • トピック「PCとスマホのヘッダーを追従型にしたい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)