設定したい機能
一定の高さまでスクロールをすると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に変えてみたりと、いろいろ試してみましたが、解決しません。
どなたかご教示いただけますと幸いです。
（ソースコードは長くなってしまうため、対象の箇所のみ記載しております）

(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');
  }
}

})();
.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;
}
      <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>