프로필카테고리질문하기
로그인 계정 만들기

스크롤 위치에 따라 div 보이기

03 개월 전

자바스크립트로 스크롤 할 때 스크롤 위치에 따라 div을 보이거나 숨기려면 어떻게 해야 하나요?

예를들어 400px 이상 스크롤하면 div을 보여줬으면 좋겠어요.

답변하기 의견 추가
의견 (0)
더 많은 의견 보기

답글 (1)

scroll 이벤트가 발생하면 window.scrollY 를 체크하세요.

스크롤 위치에 따라 보여주기

400px 이상 스크롤했을 때 아래의 div을 보여줄거에요.

<div class="show-on-scroll">Hello</div>

그렇게 하기 위해서는 CSS로 먼저 숨겨놓아야겠죠.

/* css */ .show-on-scroll { visibility: hidden; } .show-on-scroll.shown { visibility: visible; }

그리고 나서 아래의 자바스크립트 또는 jquery 중 하나를 골라 실행하세요.

그냥 자바스크립트

이 코드는 IE9 이상에서 동작해요.

/* javascript */ window.addEventListener('scroll', function() { var el = document.querySelector('.show-on-scroll'); if(window.scrollY >= 400) el.classList.add('shown'); else el.classList.remove('shown'); });
jQuery

또는 jquery를 사용할 수도 있어요.

/* javascript, jquery */ $(window).scroll(function() { var $el = $('.show-on-scroll'); if($(this).scrollTop() >= 400) $el.addClass('shown'); else $el.removeClass('shown'); });
의견 추가
의견 (0)
더 많은 의견 보기

정보

업보트
1
질문됨
3 개월 전
최근 활동
3 개월 전

카테고리

JavaScript