스크롤 내리면 로고 이미지 변경 질문 드립니다
본문
저는 스크롤 내리면 로고가 교체 하는 자바스크립트를 찾고 있습니다.
(A) 로고가 스크롤 내리면 (B) 로고가 나타나는 자바스크립트를 아무리 인터넷 뒤져 봐도 나오지 않아서 문의 드립니다 죄송합니다 ㅠㅠ
답변 1
<!DOCTYPE html>
<html>
<head>
<style>
.logo {
position: fixed;
background-size: contain;
width: 50px;
height: 50px;
}
.logoup {
background-image: url(https://sir.kr/img/common/dow/ico2-dw06.svg);
}
.logodown {
background-image: url(https://sir.kr/img/common/dow/ico2-dw05.svg);
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function () {
var logo = document.querySelector('.logo');
var scroll_before = 0;
document.addEventListener('scroll', function () {
if (scroll_before > document.documentElement.scrollTop) {
logo.className = logo.className.replace('logodown', 'logoup');
} else {
logo.className = logo.className.replace('logoup', 'logodown');
}
scroll_before = document.documentElement.scrollTop;
}, false);
}, false);
</script>
</head>
<body>
<h1 id="logo" class="logo logoup"></h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
감사합니다^^
이벤트 구문이 은근히 while 반복문처럼 동작하는군요.
신기해요 ~~ ( ^ ________ ~ ) ==b
답변을 작성하시기 전에 로그인 해주세요.