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

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

QA

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

본문

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

 

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

 

이 질문에 댓글 쓰기 :

답변 1


<!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,503
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT