j JavaScript

[js] JS - 스크롤 시, 로고이미지 변경 (Scroll logo image change)

2,334

스크롤 시, 로고 이미지 변경

<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>

결과보기