스크롤 시, 로고 이미지 변경
<style>
.logo {position: fixed; top: 10px; background-size: contain; width:56px; height:56px;}
.logoup {background-image: url(https://i.imgur.com/PQNhCln.gif);}
.logodown {background-image: url(https://i.imgur.com/YrkG5xB.gif);}
p {height:1000px; margin-top:100px;}
</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>
<body>
<h1 id="logo" class="logo logoup"></h1>
<p>홈짱닷컴 Homzzang.com</p>
</body>
결과보기
배르만 님 (230111) https://sir.kr/qa/486269
