52752


**設定したい機能**  
一定の高さまでスクロールをするとnavigationの高さを小さくし、LogoとListItemのフォントも小さくしたい。

**現状**  
onscroll eventを使用し、classList.add classList.removeでクラスの切り替えをしています。

デフォルト時のクラス .standard_nav  
スクロール時のクラス .scrolledと.scrolled_font

最初の'standard_nav'は正常に動作していますが、２つ目のaタグがうまく機能しておらず、フォントサイズが小さくなりません。

以下２点も確認してみましたが同じ結果でした。

  * Logo とList につけているclassからgetElementsByClassName でクラスの切り替え
  * if 分の中に、直接document.getElementsByTagName('a').className = "scrolled_font";を入れてクラスの付与

classをidに変えてみたりと、いろいろ試してみましたが、解決しません。  
どなたかご教示いただけますと幸いです。  
（ソースコードは長くなってしまうため、対象の箇所のみ記載しております）

[code]

    (function() {
      'use strict';
      var standardNav = document.getElementsByClassName('standard_nav');
      var nameLogo = document.getElementsByTagName('a');
    
       window.onscroll = function() { scrollFunction()};
    
       function scrollFunction() {
    
      if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        standardNav[0].classList.add('scrolled');
        nameLogo[0].classList.add('scrolled_font');
      } else {
        standardNav[0].classList.remove('scrolled');
        nameLogo[0].classList.remove('scrolled_font');
      }
    }
    
    })();
[/code]

[code]

    .standard_nav { /*remove with scroll*/
      overflow: hidden;
      background-color: pink;
      transition: 0.4s;
      position: fixed;
      width: 100%;
      top: 0;
      height: 100px;
      line-height: 100px;
      z-index: 99;
    }
    .scrolled {/*scrolled*/
      height: 50px;
      line-height: 50px;
    }
    .scrolled_font {
      font-size: 18px; /*scrolled*/
    }
    
    .logo {
      font-size: 24px;
      margin-left: 2rem;
      font-weight: bold;
      transition: 0.4s;
      text-align: center;
    }
    ul {
      display: flex;
    }
    
    .navbar_right {
      float: right;
      margin-right: 2rem;
    }
    .navbar_right a {
      text-align: center;
      font-size: 24px;
      transition: 0.4s;
    }
    li + li {
      margin-left: 4rem;
    }
[/code]

[code]

          <div class="standard_nav">
              <a href="#default" class="logo">Logo</a>
              <div class="navbar_right">
                <ul>
                  <li><a href="#home" class="list">Home</a></li>
                  <li><a href="#contact" class="list">Contact</a></li>
                  <li><a href="#about" class="list">About</a></li>
                </ul>
              </div>
          </div>
[/code]


CC BY-SA 4.0
2019-02-13T08:07:34.317
52750
2019-02-13T15:50:48.963
2019-02-13T15:50:48.963
76
32157
question
javascript css
JavaScriptで画面スクロール時のクラスの切り替えができない


CSSにおいて、`.scrolled_font`のスタイル指定が`.logo`よりも上に書かれていることが原因です。

ご提示のページにおいて、JavaScriptは正しく動作しています。その結果、スクロールした状態においてa要素には`logo`クラスと`scrolled_font`クラスが両方付いている状態になるので、これらのスタイルが両方適用されます。つまり、`.scrolled_font`の指定により`font-
size: 18px;`が、`.logo`の指定により`font-size:
24px;`が適用されます。この場合、`.logo`と`.scrolled_font`で詳細度（優先順位）が同じであるため、下に書かれているほう、つまり`.logo`のほうが優先され、フォントサイズは`24px`のまま変化しないという状況になっています。

* * *

ひとつの解決方法は、`.scrolled_font`に対する指定を`.logo`よりも下に移動させることです。

また、他の方法としては`.scrolled_font`の指定の詳細度を上げるという方法があります。詳細度については複雑なので詳しいことはご自分で調べていただきたいのですが、例えば以下のように変更すると解決します。

[code]

    .scrolled .scrolled_font {
      font-size: 18px; /*scrolled*/
    }
    
[/code]


CC BY-SA 4.0
2019-02-13T08:45:36.367
52751
2019-02-13T08:50:40.747
2019-02-13T08:50:40.747
30079
30079
52750
answer


スクロール後の件の`a`要素の`class`属性は`logo scrolled_font`になります。この場合、`.logo` と
`.scrolled_font` のセレクタの **詳細度(specificity)** は同じなので、スタイルシートの
**ソースコード上で後のルールが優先** されます。`.logo`のほうが後に書かれているので、`font-size: 24px;`が採用されます。

対処方法はいくつかあります。

  * ソースコード上での順番を変える。`.scrolled_font`のルールを`.logo`より後に書く
  * `.scrolled_font`の`font-size`に`!important`を付ける
  * `.scrolled_font`の詳細度を上げる。例: `a.scrolled_font`にする


CC BY-SA 4.0
2019-02-13T08:50:15.253
52752
2019-02-13T08:50:15.253
3475
52750
answer