아래에 따라 고정 된 위치에 스타일이 지정된 간단한 헤더가있는 경우. 스크롤 할 때 (바닐라 JavaScript에서) 200px (헤더 높이) 아래로 스크롤 할 때 어떻게 색상을 변경할 수 있습니까? stackoverflow에서 찾을 수있는 모든 예제는 JQuery 전용입니다.
body {
height: 2000px;
}
header {
width: 100%;
height: 200px;
background-color: red;
position: fixed;
}<body>
<header>
<h1>This is the header I want to change</h1>
</header>
</body>function runOnScroll() {
if (document.body.scrollTop >= 200) {
var h1 = document.getElementsByTagName("h1")[0];
h1.style.color = "green";
}
};
window.addEventListener("scroll", runOnScroll);body {
height: 2000px;
}
header {
width: 100%;
height: 200px;
background-color: red;
position: fixed;
}<body>
<header>
<h1>This is the header I want to change</h1>
</header>
</body>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다