728x90
안녕하세요! 이번 포스팅에서는 자바스크립트의 스크롤 이벤트를 활용하여 웹 페이지에서 스크롤에 따라 동적으로 요소를 표시하는 예제를 소개하려고 합니다.
스크롤 위치에 따라 나타나고 사라지는 요소를 구현하면서 자바스크립트 이벤트 처리 및 CSS 스타일링을 함께 다루어보겠습니다.
이 예제는 웹 페이지의 스크롤 위치에 따라 보여지거나 숨겨지는 요소를 구현합니다.
스크롤 위치가 화면의 1/3 위치를 넘어가면 요소가 나타나고, 화면의 2/3 위치를 넘어가면 요소가 다시 숨겨집니다. 또한 스크롤 높이를 동적으로 요소에 표시하여 사용자가 현재 스크롤 위치를 확인할 수 있도록 구현되었습니다.
전체코드 입니다.
index.html
<!DOCTYPE html>
<html>
<head>
<title>스크롤 이벤트 예제</title>
<style>
/* 요소 스타일 */
#element {
width: 200px;
height: 200px;
background-color: #ccc;
display: none;
position: fixed;
top: 50%; /* 요소를 수직 가운데로 위치 */
left: 50%; /* 요소를 수평 가운데로 위치 */
transform: translate(-50%, -50%); /* 요소의 중심을 기준으로 위치 조정 */
}
/* 더미 콘텐츠 스타일 */
.dummy-content {
height: 1000px;
background-color: #f1f1f1;
padding: 20px;
}
</style>
</head>
<body>
<h1>스크롤 이벤트 예제</h1>
<!-- 더미 콘텐츠 -->
<div class="dummy-content">더미 콘텐츠 1</div>
<div class="dummy-content">더미 콘텐츠 2</div>
<div class="dummy-content">더미 콘텐츠 3</div>
<!-- 스크롤 위치에 따라 보이는 요소 -->
<div id="element">스크롤 위치에 따라 나타나는 요소</div>
<script>
const element = document.getElementById("element");
// 스크롤 이벤트 핸들러
function handleScroll() {
const scrollPosition = window.scrollY; // 현재 스크롤 위치
const windowHeight = window.innerHeight; // 창의 높이
const showThreshold = windowHeight / 3; // 화면의 1/3 위치를 기준으로 요소를 보이게 함
const hideThreshold = (windowHeight * 2) / 3; // 화면의 2/3 위치를 기준으로 요소를 숨김
const scrollPositionToInt = parseInt(scrollPosition);
// 스크롤 높이를 요소에 동적으로 작성
element.innerText = `스크롤 높이: ${scrollPositionToInt}px`;
if (scrollPosition > showThreshold && scrollPosition < hideThreshold) {
// 스크롤 위치가 보이기 임계값 범위에 있으면 요소를 보여줌
element.style.display = "block";
} else {
// 스크롤 위치가 숨기기 임계값 범위에 있거나 이전 위치에 있으면 요소를 숨김
element.style.display = "none";
}
}
// 스크롤 이벤트 리스너 등록
window.addEventListener("scroll", handleScroll);
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [JavaScript] 스크롤 위치에 따라 메뉴바 변경하기 (0) | 2023.08.10 |
|---|---|
| [Javascript] canvas로 애니메이션 만들기 (0) | 2023.08.07 |
| [JavaScript] Owl Carousel을 활용한 캐러셀 구현하기 (0) | 2023.07.29 |
| [JavaScript] Todo list 만들기 (0) | 2023.07.24 |
| [JavaScript] 텍스트 더보기 및 줄이기 구현하기 (0) | 2023.07.14 |
