SIR
목록으로
이전글 다음글

스크롤 내리면 로고 이미지 변경 질문 드립니다 채택완료

4455
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 2,454
답변 1
목록

저는 스크롤 내리면 로고가 교체 하는 자바스크립트를 찾고 있습니다. 

(A) 로고가 스크롤 내리면 (B) 로고가 나타나는 자바스크립트를 아무리 인터넷 뒤져 봐도 나오지 않아서 문의 드립니다 죄송합니다 ㅠㅠ

#그누보드5

답변 1개

채택된 답변
+20 포인트
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개

감사합니다^^
이벤트 구문이 은근히 while 반복문처럼 동작하는군요.
신기해요 ~~ ( ^ ________ ~ ) ==b

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고