[jQuery] scroll 위치 감지 + 이벤트 실행

choii_ii·2025년 1월 31일

[jQuery] 스터디노트

목록 보기

4/6

📌 KEY POINT

💚 스크롤이 특정 위치에 도달하면 header 스타일 변경
💚 .scrollTop() : 현재 스크롤 위치 가져오기
💚 .offset() : 문서(document) 기준으로 특정 요소의 위치를 가져오는 jQuery 메서드

👉🏻 마크업은 이렇게! (HTML5)

🩵 기준이 되는 특정 요소에 class/id 값 지정
🔹 here이라는 클래스를 지정해줬다.

<body>
<!-- 상세 코드 생략 --!>
<section class="here"></section>
</body>

👉🏻 스크립트는 이렇게! (jQuery)

🩵 $(window).scroll() : 현재 화면에서 스크롤 할 때, 이벤트 실행

🩵 .scrollTop() : 현재 스크롤 위치(Y축) 가져오기
🔹 .scrollTop(값) : 500 등 수치값을 명시하면 해당 값(위치)만큼 스크롤 이동

🩵 .offset() : 문서(document) 기준으로 특정 요소의 위치를 가져오는 jQuery 메서드
🔹 .offset().top : 특정요소의 세로(Y축) 위치 가져오기
🔹 .offset().left : 특정요소의 가로(X축) 위치 가져오기
🔹 .offset({ top: 값, left: 값 }) : 특정요소 위치 변경

🩵 alert를 예시로하여 1회만 이벤트를 실행시켜야 할 때, flag 사용
🔹 초기 값으로 flag = false; 셋팅
🔹 flag == false의 조건이 true일 때 조건문 실행
🔹 flag 변수명에 true 값을 재할당하여 true값으로 바꿈 -> 해당 조건문이 재실행될 때 flag == false 조건을 통과하지 못하여 alert가 반복실행되지 않음.

<script>
let flag = false; // 한 번만 실행되도록 제어하는 변수
$(window).scroll(function () { 
	curr=$(this).scrollTop(); // 현재 스크롤 위치 가져오기

	target=$('.here').offset().top; // 특정요소(.here)의 y축 위치 가져오기

	if (curr >= target) { 
    // 현재 스크롤 위치가 .here의 y축 위치 보다 클 때 (.here 요소가 스크롤에 의해 위로 올라갔음을 의미)
    
		$('header').addClass('on'); // 스타일을 변경할 요소에 클래스 추가
        
        // 한 번만 실행되는 알림
        if(flag == false){
		alert('1회실행');
		flag = true
		}
        
	} else {
		$('header').removeClass('on'); // 스타일을 변경할 요소에 클래스 제거
	}
});
</script>