前略、stallbear さん

投稿者:: @stallbear

大きな問題ではないのですが、ヘッダを表示させた状態でウィンドウサイズを少しでも変えると、ヘッダ背景画像が消えて、メニューがウィンドウ最上部に下りてきます。

そのまま上にスクロールは出来ず、いったん下げてから上に戻すとヘッダ背景画像が表示されます。

私の環境で拝見しますと。グローバルメニューが上から降りてきても、マウスのスクロールホイールで操作すれば、上にスクロールが可能のようです。（私はWindows10なので、Mac環境の動作については、わかりかねますが・・）

画面右下に表示される、「トップへ戻るボタン」をクリックした場合は、グローバルメニューが重複しないように、ヘッダー画像の位置までは、戻らずに、メインカラムのトップ辺りで止まるようです。

これは、このCocoonのサイトでも、同様なので、こういう仕様なのかなぁ、と思っていましたが、それとは別の問題になりますでしょうか？

それとも、「ヘッダー固定」機能を使いたいのだけれど、希望する動作とちょっと異なる、ということになりますでしょうか？

あるいは、stallbearさんの環境では、正常な動作にならない、という内容になりますでしょうか？

stallbear さん

ようやく、意味がわかりました。

確かに、サイトを一旦表示されてから、ブラウザの画面幅を縮めた場合は、マウスでも、ほんの少しだけ下にスクロールしてからでないと、上にスクロールできない、ということみたいですね。

これは、きっと、わいひらさんが、コメントをくださるのではないかと思います。

ちょっと、事情を理解するのに手間どってしまいました。

stallbear さん

Cocoonのサイトでも同じ症状が出るみたいなので、stallbear さんに限ったことではないのかもしれませんね。

私は、トップへ戻るボタンで、最上部まで戻っちゃってもいいような気もしますが・・（でも、これは作者様に聞いてみないと、いろいろな理由があるのかもしれません）

@leafytree さん

早速のコメントありがとうございます。

Windows環境での確認ありがとうございます。

私の環境で拝見しますと。グローバルメニューが上から降りてきても、マウスのスクロールホイールで操作すれば、上にスクロールが可能のようです。（私はWindows10なので、Mac環境の動作については、わかりかねますが・・）

グローバルメニューが上から降りてきたあと、マウスのスクロールホイールで上にスクロール出来ないのです。

添付のスクリーンキャプチャを見て頂ければお分かりになるかと思いますが、スクロールバーが上限に表示されています。この状態ではスクロールホイールでも上には上がりません。

画面右下に表示される、「トップへ戻るボタン」をクリックした場合は、グローバルメニューが重複しないように、ヘッダー画像の位置までは、戻らずに、メインカラムのトップ辺りで止まるようです。

これはMacでも同じ動きでした。

ただし、スクロールバーは上限位置に表示されていますが、マウスのスクロールホイールで少し上に上げると急にヘッダ背景画像が表示されました。いったん下にスクロールすることで何か条件が変わっているのかも知れません。

あと気付いていなかったのですが、このCocoonサイトでも同一の現象が発生するので、どうやらMac特有の現象なのかも知れません。

ブラウザもsafariだけでなくChromeで確認したのですが・・・

それとも、「ヘッダー固定」機能を使いたいのだけれど、希望する動作とちょっと異なる、ということになりますでしょうか？

ウィンドウサイズを変えない限り問題は発生しませんし、普通に使う分には希望している動作をしてくれています。ただ少し違和感を感じただけですし、不具合というには手間に対しての効果が低いと思いますので、このまま使用したいと思います。

@leafytree さん

重ね重ねの確認、お手数をおかけいたしました。ありがとうございます。

windowsでも同じ状況なのですね。

前のリプでも書いたのですが、直ればいいかな、程度なので、わいひらさんの気が向けば確認いただければと思っています。

@stallbear さん

試しに、ソースコードをコピーしてローカルで固定ヘッダー用のJavaScriptのコードの中の以下の部分をコメントアウトしてみたら、症状はなくなったのですが、私は、JavaScript は詳しくないので、きっと、何かしら必要なものなのでしょう。

 /*ウインドウがリサイズされたら発動*/
$window.resize(function() {
  /*ウインドウの幅を変数に格納*/
  var w = $window.width();
  if (w <= mobileWidth) {/*モバイル端末の場合*/
    staticHeader();
  } else {/*パソコン端末の場合*/
    stickyHeader();
  }
});

たぶんですが、わいひらさんが、ご説明くださるような気がします。

おそらくそれは、スクロール位置がトップの0から少しでもずれたら、固定ヘッダー表示になる仕様になっていたからかと思います。
僕も前々から、ここはもう少し余裕を持たせても良いかなと思っていつつも、そのままにしていた^^;ので、今回少し余裕をもたせて調整してみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

@yhira さん

早速、新しいテーマファイルをローカルサイトにインストールして、グローバルメニューをヘッダー固定にして試してみました。

PCのブラウザで画面の横幅を狭くしたときに、ヘッダーが上から降りてこなくなりました。

また、画面右下に表示されるトップへ戻るボタンをクリックしたとき、最上部まで戻るようになりました。（でも、これって、以前のように途中まで戻る方が良かった、という方はいらっしゃらないかな？私は、最上部までの方が自然なように感じますけれども・・）

@yhira さん

でも、該当部分のコードの役割は、私には、まだ、ちょっとわかりません。

もう少し、勉強しなきゃ・・

@stallbear さん

このCocoonのサイトにも新しいコードが適用されているみたいです。

表示の見本には、このCocoonのサイトを見た方がわかりやすいかもしれませんね。

@yhira さん

Cocoonのサイトの上部にマージンがあるみたいなんですけど、これって、これでいいのでしょうか？

html {
    margin-top: 32px !important;
}

@yhira さん

ありがとうございます！
早速アップロードしてみましたところ、ヘッダ背景画像が隠れることはなくなりました。
（幅を変えるだけでカクッと表示がずれてしまうことで、異常動作のように感じてしまっていたんだと思います）

今後ともよろしくお願いいたします。

きっと、何かテストされていらっしゃるのでしょうね。

私、個人的には、ヘッダー固定の動きが、自然でスムーズになったように思います。

移転は、スクロールバーをカッチカチに0ポジションにしないと戻らなかったので、僕も以前から、ちょっとした窮屈感は感じていました。
とりあえず、特に問題はないようなので、次のバージョンを現在の仕様でいきたいと思います。

投稿者:: @leafytree

Cocoonのサイトの上部にマージンがあるみたいなんですけど、これって、これでいいのでしょうか？

これは多分、ログアウトすると表示されないのかなと思います。
おそらく、Adminバーが何かしらのJavaScriptエラーで表示されていない際にそのように表示されているのかも。

僕の環境では、Adminバーが問題なく表示されていて、ちょっと原因までは分からないかもしれません。

@yhira さん

確かにフォーラムにログインしているときだけみたいです。

プラグインのwpforoの関連でしたか・・

Adminバー自体は、WordPressの機能なのでwpForo以外の原因の可能性もあるかもしれません。
もしかしたら、デベロッパーツリーのコンソールでJavaScriptエラーが出ているとかがあるのかもしれません。
ただエラーを見ても、直せるかどうかちょっと分からないですが^^;

@yhira さん

以下のCSSは、WordpressのAdminバー（ツールバー）を表示するためのもののようですね。

html {
    margin-top: 32px !important;
}

上のスクリーンショットはアドミンバーが表示されているんですね。
本来はそのように表示するための、CSSかと思います。

こんばんは。

この現象が再発しているのですが、最新のmain themeで戻ってしまいました？

@strollbear さん

その後、ブラウザのデベロッパーツールのコンソールにエラーが出ているというお問い合わせのトピックがあり、変数の宣言を追記しているみたいです。

私はよくわからないですが、そもそものコードの設定に問題があるのかもしれません。

おそらく、わいひらさんが療養から戻られたら、修正くださるかと思います。

他の課題もあろうかと思われますので、順次、ご対応くださるのではと思います。

https://github.com/yhira/cocoon/commit/0f34a5c711780994992ff1f7366e10dc2dfacbf5

@leafytree さん

コメントありがとうございます。
気長に待つようにします。

＞わいひらさん

特に急ぐ問題でもクリティカルな問題でもありませんので、お手すきの際にでも手がけていただければと思います。
よろしくお願いします。

よろしければお手数ですが改めて環境情報をいただいてよろしいでしょうか。

@yhira　わいひらさん

お世話になってます。

現在の環境情報です。

----------------------------------------------
サイト名：美味いメシと旅さえあれば
サイトURL： https://foto.4-strings.com
ホームURL： https://foto.4-strings.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.5.3
PHPバージョン：7.4.3
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15
サーバーソフト：Apache
サーバープロトコル：HTTP/2.0
エンコーディング：br, gzip, deflate
言語：ja-jp
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.4.5
カテゴリ数：26
タグ数：246
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.2
style.cssサイズ：845バイト
functions.phpサイズ：820バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2020/08/6042445140_bf7a6198c2_z.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.5.3
Akismet Anti-Spam 4.1.7
Aurora Heatmap 1.4.9
Category Order and Taxonomy Terms Order 1.5.7.3
Google XML Sitemaps 4.1.1
Jetpack by WordPress.com 9.0.2
Jetpack Without Promotions 1.1.0
Media Library Assistant 2.84
Visual Portfolio, Posts & Image Gallery 2.8.1
Wordfence Security 7.4.12
WP Multibyte Patch 2.9
----------------------------------------------

環境情報をありがとうございます。
該当部分を修正してみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
https://github.com/yhira/cocoon/commit/41101bdfc7170fe077653d051e5169ca66d68679

@yhira わいひらさん

早速インストールして確認してみましたところ、改善致しました。
ありがとうございました！

ご確認いただきありがとうございます！