【WordPress】「Arkhe」でスクロールしていない時のヘッダー「スクロール判定」について（data-scrolled）

2022/12/282023/05/31

「Arkhe」には、ページ上でスクロールがされているか判定を実施してくれる、[data-scrolled=”false”]が標準装備されています。
これにより、スクロールしている時・していない時でCSSの動作を切り替えることができます。

利用例

例えば、スクロール判定によって、
グローバルナビゲーションにホバー（:hover）した時のテキストカラーを切り替えることができます。

[data-scrolled="false"]  .c-gnav__li.-current,
[data-scrolled="false"]  .c-gnav__li.focus,
[data-scrolled="false"]  .c-gnav__li:hover {
	color: var(--ark--color-text);
}

[data-scrolled="true"]  .c-gnav__li.-current,
[data-scrolled="true"]  .c-gnav__li.focus,
[data-scrolled="true"]  .c-gnav__li:hover {
	color: var(--ark--color-main);
}