스크롤의 요소 모양을 변경하는 JavaScript

Question

그래,이 자바 스크립트가 있었고 완벽하게 작동했습니다.

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>

사람이 이유를 알고 있나요? 감사합니다.

Answer 1

신고 내용은 arrow입니다. 이

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

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

에 당신이 그것에 대해 오류가 발생하지 않았다 표시되지 않습니다 변경합니다. JS 함수가 아닙니다.