오늘은 jQuery로 스크롤 값에 따라 이벤트를 추가하는 방법을 작성해보겠다!
클론코딩하던 도중 의외로 jQuery가 많이 쓰인다는 걸 깨달았다.
그냥 단순 스크립트로 이벤트를 줄 수 있지만 훨씬 코드가 복잡해지고 어려워짐.. ㅠ
제이쿼리를 쓰면 더 직관적이고 애니메이션도 줄 수 있다.
아무튼! 사이트를 보다보면 스크롤 이펙트가 많이 사용된 사이트를 볼 수 있을 것이다.
내가 클론한 사이트 또한 스크롤마다 다양한 애니메이션과 효과가 적용됐는데
스크롤값에 따라 이벤트를 추가하는 방법을 기록하려한다.(class 추가, css 적용 등등등..)
jQuery로 스크롤 이벤트 추가하기
스크롤 값에 따라 CSS 속성 변경하기
요건 헤더 부분을 스크롤 할 때마다 네비게이션이 나타나게끔 이벤트를 적용했다.
<header>
<div class="wrapper clear">
<div class="left">
<div class="logo_area">
<h1>
<a href="https://vibe.naver.com/today">
<img
src="https://vibe.naver.com/about/img/logo.png"
alt="NAVER VIBE 로고 이미지"
/>
</a>
</h1>
</div>
<div class="nav_area">
<nav class="pc_nav">
<ol>
<li>
<a
id="pcNavOne"
class="on menu"
href="#contents_01"
rel="contents_01"
>파티룸</a
>
</li>
<li>
<a
id="pcNavTwo"
class="menu"
href="#contents_02"
rel="contents_02"
>오디오</a
>
</li>
<li>
<a
id="pcNavThree"
class="menu"
href="#contents_03"
rel="contents_03"
>추천 콘텐츠</a
>
</li>
<li>
<a
id="pcNavFour"
class="menu"
href="#contents_04"
rel="contents_04"
>의미있는 시도들</a
>
</li>
<li>
<a
id="pcNavFive"
class="menu"
href="#contents_05"
rel="contents_05"
>VIBE 기능</a
>
</li>
<li>
<a
id="pcNavSix"
class="menu"
href="#contents_06"
rel="contents_06"
>리뷰 및 평점</a
>
</li>
<li>
<a
id="pcNavSeven"
class="menu"
href="#contents_07"
rel="contents_07"
>데스크톱 앱 설치</a
>
</li>
</ol>
</nav>
<nav class="mobile_nav">
<button id="mo_inner_nav" class="front" type="button">
파티룸
</button>
<ol class="toggle_list">
<li>
<a
id="moNavOne"
class="mo_menu active"
href="javascript:"
rel="contents-01"
>파티룸</a
>
</li>
<li>
<a
id="moNavTwo"
class="mo_menu"
href="javascript:"
rel="contents-02"
>오디오</a
>
</li>
<li>
<a
id="moNavThree"
class="mo_menu"
href="javascript:"
rel="contents-03"
>추천 콘텐츠</a
>
</li>
<li>
<a
id="moNavFour"
class="mo_menu"
href="javascript:"
rel="contents-04"
>의미있는 변화</a
>
</li>
<li>
<a
id="moNavFive"
class="mo_menu"
href="javascript:"
rel="contents-05"
>VIBE 기능</a
>
</li>
<li>
<a
id="moNavSix"
class="mo_menu"
href="javascript:"
rel="contents-06"
>리뷰 및 평점</a
>
</li>
<li>
<a
id="moNavSeven"
class="mo_menu"
href="javascript:"
rel="contents-07"
>앱 다운로드</a
>
</li>
</ol>
</nav>
</div>
</div>
<div class="right">
<div class="profile_area">
<div class="before_login">로그인</div>
</div>
<a
class="start_link btn gradient gnb"
href="https://vibe.naver.com/today"
>
<span>VIBE 시작하기</span>
</a>
</div>
<div class="mobile_menu"></div>
</div>
</header>
// header 스크롤 이벤트
$(document).ready(function () {
var lastScrollTop = 0;
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > lastScrollTop) {
$(".nav_area").css({
top: "-15px",
transition: "top 0.4s ease",
});
$(".logo_area").css({
top: "-70px",
transition: "top 0.4s ease",
});
} else {
$(".logo_area").css({
top: "0px",
transition: "top 0.4s ease",
});
$(".nav_area").css({
top: "-120px",
transition: "top 0.4s ease",
});
}
lastScrollTop = scroll;
});
});- $(document).ready(function () {...});: 이 코드는 문서가 로드될 때 실행할 JavaScript를 정의합니다. 즉, 페이지가 완전히 로드된 후에 코드 블록이 실행됩니다.
- var lastScrollTop = 0;: lastScrollTop 변수를 선언하고 0으로 초기화합니다. 이 변수는 이전 스크롤 위치를 추적하는 데 사용됩니다.
- $(window).scroll(function () {...});: 이 부분은 윈도우의 스크롤 이벤트를 처리하는 함수를 정의합니다. 사용자가 페이지를 스크롤할 때마다 이 함수가 실행됩니다.
- var scroll = $(window).scrollTop();: 현재 스크롤 위치를 가져와 scroll 변수에 저장합니다.
- if (scroll > lastScrollTop) {...} else {...}: 이전 스크롤 위치와 현재 스크롤 위치를 비교하여 사용자가 아래로 스크롤했는지 여부를 확인합니다.
- $(".nav_area").css({...}); 및 $(".logo_area").css({...});: 네비게이션과 로고 영역의 CSS 속성을 변경합니다. 스크롤 방향에 따라 top 위치를 조정하여 요소들이 화면에서 나타나거나 사라지도록 합니다.
- transition: "top 0.4s ease": CSS의 transition 속성을 사용하여 속성 변화를 부드럽게 만듭니다. 여기서는 top 속성에 대해 0.4초 동안 부드럽게 변화하도록 설정합니다.
- lastScrollTop = scroll;: 현재 스크롤 위치를 lastScrollTop 변수에 저장하여 다음 스크롤 이벤트에서 사용될 수 있도록 합니다.
스크롤 값에 따라 클래스 추가, 삭제하기
<a
class="sideMenu_down"
href="#contents_midbanner"
rel="contents_midbanner"
>
<img
src="https://vibe.naver.com/about/img/img_ad-btn_down.png"
alt=""
/>
</a>
<a
class="sideMenu_up"
href="#contents_midbanner"
rel="contents_midbanner"
>
<img
src="https://vibe.naver.com/about/img/img_ad-btn_up.png"
alt=""
/>
</a>function scrollEffect() {
$(window).on("scroll", function () {
let scroll = $(window).scrollTop();
let section00 = $("#contents_00").offset().top;
let section01 = $("#contents_01").offset().top;
let section02 = $("#contents_02").offset().top;
let section03 = $("#contents_03").offset().top;
let section04 = $("#contents_04").offset().top;
let section05 = $("#contents_05").offset().top;
let section06 = $("#contents_06").offset().top;
let section07 = $("#contents_07").offset().top;
let sectionMidBanner = $("#contents_midbanner").offset().top;
if (section01 <= scroll + 500 && scroll <= sectionMidBanner - 400) {
$(".sideMenu_down").addClass("active");
} else {
$(".sideMenu_down").removeClass("active");
}
if (section03 <= scroll + 500 && scroll <= section07) {
$(".sideMenu_up").addClass("active");
} else {
$(".sideMenu_up").removeClass("active");
}
});
}웹 페이지의 스크롤 이벤트에 대응하여 특정 섹션들이 스크롤되는 위치에 따라 사이드 메뉴의 활성화 상태를 변경하는 기능을 구현한 것입니다.
- scrollEffect() 함수는 스크롤 이벤트를 처리하는 함수입니다.
- $(window).on("scroll", function () { ... }) 부분은 윈도우(브라우저 창)의 스크롤 이벤트를 감지하는 jQuery 이벤트 핸들러를 등록합니다. 이벤트가 발생하면 내부의 함수가 실행됩니다.
- let scroll = $(window).scrollTop(); 코드는 현재 스크롤 위치를 변수 scroll에 저장합니다.
- 이어지는 줄들은 각 섹션의 위치를 변수에 저장하는 부분입니다. $("#contents_00"), $("#contents_01") 등은 해당 ID를 가진 HTML 요소를 찾아 그 위치를 가져오는데, offset().top 메서드를 사용하여 문서 상단으로부터의 거리를 픽셀 단위로 반환합니다.
- 조건문들은 스크롤 위치에 따라 사이드 메뉴의 활성화 상태를 변경합니다.
- 첫 번째 조건문은 section01 위치부터 sectionMidBanner 위치까지 스크롤되는 동안에는 .sideMenu_down 클래스를 가진 요소에 active 클래스를 추가합니다.
- 두 번째 조건문은 section03 위치부터 section07 위치까지 스크롤되는 동안에는 .sideMenu_up 클래스를 가진 요소에 active 클래스를 추가합니다.
여기서 500, -400 등의 숫자는 각 섹션의 활성화를 조절하는 값으로, 스크롤 위치와 해당 섹션의 위치를 비교하여 조건을 결정합니다. 이 값들은 디자인에 따라 조정될 수 있습니다.
728x90
반응형
