답변 1개
채택된 답변
+20 포인트
2년 전
</p>
<p><!DOCTYPE html>
<html>
<head>
<style>
.logo {
position: fixed;
background-size: contain;
width: 50px;
height: 50px;
}
.logoup {
background-image: url(<a href="https://sir.kr/img/common/dow/ico2-dw06.svg);" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw06.svg);</a>
}
.logodown {
background-image: url(<a href="https://sir.kr/img/common/dow/ico2-dw05.svg);" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw05.svg);</a>
}
</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>
</body>
</html></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
4
4455
2년 전
감사합니다^^
s
sinbi
2년 전
이벤트 구문이 은근히 while 반복문처럼 동작하는군요.
신기해요 ~~ ( ^ ________ ~ ) ==b
신기해요 ~~ ( ^ ________ ~ ) ==b
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인