スクロールしても固定表示されるヘッダーで途中から背景色を変えたい

こちらのサイトを参考に、ヘッダーメニューの背景色を途中から変えようとしているのですが変化しないです。
https://webdesignday.jp/inspiration/technique/css/4166/#i-2
内容は以下の通りなのですが、どこかが間違ってるのでしょうか?

html
1<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
2<header class="header">
3  <div class="header_l"><img src="lib/images/top_logo.png" alt=""/></div>
4  <div class="header_r">メニューボタン</div>
5</header>
6<main>
7  <section class="top_img"><img src="images/main_01.jpg" alt=""/></section>
8～～

css
1.header {
2    overflow: hidden;
3    position: fixed;
4    width: 100%;
5    margin: 0;
6    padding: 0;
7    z-index: 100;
8  }
9.header .transform{
10    background-color: rgba(255,255,255,0.5);
11}
12.top_img {
13    margin-bottom: 60px;
14}

jquery
1var _window = $(window),
2    _header = $('.header'),
3    heroBottom;
4 
5_window.on('scroll',function(){
6    heroBottom = $('.top_img').height();
7    if(_window.scrollTop() > heroBottom){
8        _header.addClass('transform');   
9    }
10    else{
11        _header.removeClass('transform');   
12    }
13});
14 
15_window.trigger('scroll');

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

セレクタが間違っていますよ。

css
1.header .transform {
2/*     ^これがいらないです。 */

投稿2021/02/09 03:01

Lhankor_Mhy

総合スコア36115

winter_pc

2021/02/09 09:03

ありがとうございました。修正したら動作しました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

スクロールしても固定表示されるヘッダーで途中から背景色を変えたい

関連した質問