サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023-07-17 16:58
お世話になっております。
ヘッダーのメニューをスクロール追従（固定）する設定（Cocoon 設定>ヘッダー>ヘッダーを固定する）にチェックを入れて保存すると、スクロールしたときヘッダーが見切れてしまいます。
どうすれば正常にヘッダーが固定できますか?
ご教示いただけますと幸いです。
This topic was modified 10か月前 by KonpeitoRO
私は完全招待制のクローズドな Web サイトを WordPress と Cocoon で運営しています。
そのため質問時なども当該サイトのURLは記載できないことが多いです。
2023-07-17 20:03
●ヘッダー固定の動作
ヘッダー部分、図①が画面外になると、ヘッダーが現れ固定されます。
その際、センターロゴの場合、右寄せに変化します。図③
スクロールしたときヘッダーが見切れてしまいます。
この文面で「見切れる」とは図②のように、スクロールするとヘッダーロゴが画面外になり消える事を指すのか？と思い。
期待動作は、ヘッダー部分は始めから動かず、ヘッダーロゴ+グローバルメニューが固定（常に）表示し続ける？と読み取りました。
Cocoonはマニュアルにも動作例がありますが、ヘッダー部分が一旦画面外となり、ヘッダーの形状が変化した後、再表示され固定となります。
●ご参考
わいひら reacted
Topic starter
2023-07-18 07:52
@yhira さん
@chuya さん
ご返信ありがとうございます。
サイトタイトルやロゴ、そしてメニュー項目が隠れる状態です。
テストサイトではプライベートブラウジングやキャッシュの削除などを試しましたが、正常にスクロール追従できています。
ですが、非公開の本番サイトではやはり変わりませんでした。
ヘッダーを固定する にチェックを入れて、Cocoon 設定の「スキン」タブなどで確認すると、本番サイトでもスクロール追従が正常にされているように見えます。
ですが、サイトを表示させてみると見切れる状態です。
私は完全招待制のクローズドな Web サイトを WordPress と Cocoon で運営しています。
そのため質問時なども当該サイトのURLは記載できないことが多いです。
2023-07-18 09:03
adminバーで隠れていると言う事はないですか？
Topic starter
2023-07-18 10:42
@chu-ya さん
adminバーで隠れていると言う事はないですか？
WordPress のプロフィールを開き、 「サイトを見るときにツールバーを表示する」のチェックを外すと、adminバーが非表示になりますが、これでヘッダーが正常にスクロール追従するようになりました。
管理バーが非表示だと少し使いにくいかもしれませんが、これで使ってみます。
的確なご回答をくださり、本当にありがとうございました。
私は完全招待制のクローズドな Web サイトを WordPress と Cocoon で運営しています。
そのため質問時なども当該サイトのURLは記載できないことが多いです。
わいひら reacted
2023-07-18 12:43
@konpeitoro さん
解決されてよかったです。
添付された画像の上に少しだけ黒があり、想像で回答しました。
恐れ入りますが、条件、操作（例：下にスクロール）など、もう少し足して頂けると調査する側としては助かります。
わいひら reacted
2023-07-18 12:47
＞わいひら さん
本件の対策の反映要否の判断願います。
●原因
固定ヘッダーに変化した際、top:0で画面上としている。
この為、adminバーがあると、adminバーの高さ分隠れてしまう。
https://github.com/xserver-inc/cocoon/blob/9e5aceed166538bd35b8a2b49aa15fe15d9cca87/tmp/footer-javascript.php#L107-L109
●対策案
[Cocoon設定]→[ヘッダー]→「ヘッダーを固定する」オンの時
adminバーがあるか判定し、adminバー分y座標をずらし、ヘッダーを表示する。
admin_height = 0;
if ($('#wpadminbar').length) {
admin_height = $('#wpadminbar').outerHeight();
}
$("#header-container").animate({
'top': admin_height
}, 500);
わいひら and KonpeitoRO reacted
Topic starter
2023-07-18 14:21
@chu-ya さん
ヘッダーのスクロール追従が正常に動作しないのは、ヘッダー固定を設定したうえで「サイトを見るときにツールバーを表示する」にチェックを入れた状態で下にスクロールした場合です。
なお、当該サイトはログインが必須のサイトのため、管理バーが表示されている利用者（PC からアクセス）にも影響があると思います。
テストサイトで同じ現象を再現しましたが、その画面キャプチャは以下にアップロードしてあります。
https://gyazo.com/d211c33433392ff4bc5fdfd8cd977b19
調査いただきありがとうございます。
This post was modified 10か月前 by KonpeitoRO
私は完全招待制のクローズドな Web サイトを WordPress と Cocoon で運営しています。
そのため質問時なども当該サイトのURLは記載できないことが多いです。
わいひら reacted
2023-07-18 18:01
@konpeitoro さん
ありがとうございます。詳細を書いて頂き、現象が明確になり、助かります。
以下の件、次回からでよかったのですが。
恐れ入りますが、条件、操作（例：下にスクロール）など、もう少し足して頂けると調査する側としては助かります
わいひら and KonpeitoRO reacted
2023-07-18 19:14
chu-yaさんありがとうございます！
管理バーがある時にでも固定メニューが表示されていた方が分かりやすいと思うのでコードをそのまま使わせていただきました。
実装したものをGitHubにアップしておきました。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
KonpeitoRO reacted
2023-07-18 19:24
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.2.8
カテゴリー数：19
タグ数：148
ユーザー数：1
----------------------------------------------
対策されている事を確認しました。
adminバーあり
adminバーなし
わいひら reacted
2023-07-18 19:29
@yhira さん
変数 admin_height に const も let も使われていないです。
これはまずいので、私であればこのように書きます。
const wpadminbar = document.getElementById('wpadminbar');
const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0;
$('#header-container').animate(
{
top: headerContainerTop,
},
500
);
2023-07-18 20:13
ご指摘ありがとうございます！
動作しか見てませんでした。修正させていただきました。
https://github.com/xserver-inc/cocoon/commit/04369d7788465e0c02523c6825ec7c1a6deab978
Topic starter
2023-07-19 13:13
皆さんご回答くださりありがとうございます。
最新版の Cocoon テーマをダウンロードして適用すると、ツールバー表示状態でヘッダーがスクロール追従するようになりました。
いつも迅速な対応をくださり、本当にありがとうございます。
今後ともよろしくお願いいたします。
私は完全招待制のクローズドな Web サイトを WordPress と Cocoon で運営しています。
そのため質問時なども当該サイトのURLは記載できないことが多いです。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。