スクロールの要素の外観を変更するJavaScript

Question

さて、このJavaScriptを使用していたので、完全にうまくいきました。

var header = document.getElementById('header'); 
 

 
window.onscroll = function() { 
 
    "use strict"; 
 
    if (document.body.scrollTop >= 6) { 
 
     header.className = 'header-colored'; 
 
    } else { 
 
     header.className = 'header-transparent'; 
 
    } 
 
};

しかし、私はスクリプトに別の要素を追加したとき、それはいくつかの理由のために働いて停止しました。ヘッダーのように作業を停止すると透明になり、矢印は常に表示されます。

すべての関連するコード（私は信じる）：

var header = document.getElementById('header'); 
 
var arrow = document.getElementsById('arrowToTop'); 
 
window.onscroll = function() { 
 
    "use strict"; 
 
    if (document.body.scrollTop >= 6) { 
 
     header.className = 'header-colored'; 
 
     arrow.className = 'arrow-visible'; 
 
    } else { 
 
     header.className = 'header-transparent'; 
 
     arrow.className = 'arrow-transparent'; 
 
    } 
 
};

#header { 
 
    position: fixed; 
 
} 
 

 
.header-transparent { 
 
    background-color: transparent; 
 
} 
 

 
.header-colored { 
 
    background-color: black; 
 
    opacity: .9; 
 
} 
 

 
.toTop { 
 
    bottom: 0; 
 
    right: 0; 
 
    position: fixed; 
 
} 
 

 
    .arrow-visible { 
 
    display: block; 
 
} 
 

 
.arrow-transparent { 
 
    display: none; 
 
}

<header id="header" class="header-transparent"> 
 
     <img src="Bilder/LOGO.png" alt="Blabla" style="width: 10%;"> 
 
     <ul id="navbar"> 
 
      <li><a href="#allText">home</a></li> 
 
      <li><a href="#">business</a></li> 
 
      <li><a href="#">technical</a></li> 
 
      <li><a href="#">about us</a></li> 
 
     </ul> 
 
    </header> 
 

 
    </div> 
 
    <i class="material-icons" id="arrowToTop"><a class="toTop" href="#">keyboard_arrow_up</a></i> 
 
    </div>

誰もが、私は新しい変数とコードの2つの余分な行を追加したときにスクリプトが動作を停止した理由を知っていますか？ ありがとう！

Answer 1

arrowの宣言は複数です。この

var arrow = document.getElementsById('arrowToTop'); 

var arrow = document.getElementById('arrowToTop'); 

するために、私はあなたがそのために、エラーを取得できませんでしたどのように表示されていない変更します。それはJSの機能ではありません。