저는 스크롤 내리면 로고가 교체 하는 자바스크립트를 찾고 있습니다.
(A) 로고가 스크롤 내리면 (B) 로고가 나타나는 자바스크립트를 아무리 인터넷 뒤져 봐도 나오지 않아서 문의 드립니다 죄송합니다 ㅠㅠ
|
답변 1개 / 댓글 2개
채택된 답변
+20 포인트
3년 전
Copy
<!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>
답변에 대한 댓글 2개
답변을 작성하려면 로그인이 필요합니다.