스크롤 내리면 로고 이미지 변경 질문 드립니다
본문
저는 스크롤 내리면 로고가 교체 하는 자바스크립트를 찾고 있습니다.
(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>
답변을 작성하시기 전에 로그인 해주세요.