ヘッダーのカラーを初めは透明で途中から白にしたいのですが出来ません。

Question

色々試してはいるのですが、解決できないで困っています。

wordprssでサイト制作をしていますが、headerをtop0px時に透明で、スクロールをし100px下あたりで背景色を白にしたいのですが教えて頂けないでしょうか？

jQuery(window).on('scroll', function () {
  if (jQuery('.key-header').height() < jQuery(this).scrollTop()) {
jQuery('.key-header').addClass('change-color'); }
 else {
 jQuery('.header').removeClass('change-color'); } });
CSSには
.key-header {
  padding: 30px;
  transition: all .5s;
  position: fixed;
  width: 100%;
  z-index: 100;
}
.key-header.change-color {
  background-color: blue;
}

どうぞ宜しくお願い致します。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
HTMLも必要です。

あと、現在何が起きているのでしょうか。

[m.ts10806]

>wordprss
WordPressです。
質問タグも追加してください。
https://teratail.com/tags/WordPress

[keyoooo901]

m.ts10806様

編集する事ができました。
機能の使い方と、今回のような時はWordPressタグも追加が必要な件、教えてくださり誠にありがとうございました。

[m.ts10806]

時間あるときにヘルプページをざっと読んで見るだけでも（特に「質問するときのヒント」）、的確なアドバイスを得やすくなる質問内容になってくると思います

Answer 1

解決方法を色々教えてくださった方々、本当にありがとうございました。
下記の方法で、なんとか解決できました。

window.addEventListener( "scroll", function() {

  var headerElement = document.getElementById( "header" ) ; 
  var rect = headerElement.getBoundingClientRect() ; 
  var y = rect.top + window.pageYOffset ; 
  if (y > 0) { 
    headerElement.classList.remove('hidden'); 
  } 
else {
    headerElement.classList.add('hidden'); 
  }
} ) ;

Answer 2

Intersection Observer に rootMargin というオプションがありますので、こちらで実現できるのではないでしょうか。
Intersection Observer API - Web API | MDN

Comments

[keyoooo901]

教えてくださり、誠にありがとございました。
一度試してみます。

Answer 3

jQuery('.key-header').height()の部分がヘッダーの高さを取得してると推察します。
jQuery(this).scrollTop()の部分が画面上からどれだけスクロールしたかです。
background: transparent;とすると背景色が透明に設定できます。（#00000000）でも同じ。
背景色「白」は割愛させていただきます。blueをwhiteとするだけですし。

Comments

[keyoooo901]

教えて下さり、誠にありがとうございました。
一度試してみます。