# scrollY

7개의 포스트
post-thumbnail

[220913] 오늘의 배움(TIL) - JavaScript

✍ 22년 9월 13일 공부한 내용 정리

2022년 9월 13일
·
0개의 댓글
·
post-thumbnail

스크롤 이벤트 페이지

스크롤로 무한 텍스트 플로우 되는 홈화면을 구현했다 이때 홈화면 전체를 보여주기 위해 body태그에 width, height 값을 100% 로 설정했었는데 스크롤 이벤트를 읽기 위해서는 height 값을 설정하면 스크롤 값을 읽지 못한다. 그래서 화면 전체를 보이고 싶

2022년 8월 12일
·
0개의 댓글
·
post-thumbnail

React - 컴포넌트 절대위치 찾기

웹 페이지를 만들다 보면 해당 요소의 절대위치를 찾아야 할 때 있습니다,절대위치를 이용해 스타일을 꾸미거나 로직을 만들때 사용할 수 있습니다.해당 요소가 웹 페이지를 기준으로한 위치입니다.스크롤된 컨텐츠의 길이 + Viewport 상대좌표를 구하면 요소의 절대위치를

2022년 6월 28일
·
0개의 댓글
·
post-thumbnail

[JS30] - 24) Sticky Nav

처음에는 이렇게 접근했다.css 'nav-sticky'는 position: fixed;를 가지고 있다.이 클래스를 추가해줌으로써 nav의 position을 relative에서 fixed로 바꾸어주어 스크롤할 때 함께 따라올 수 있도록 했다(아래 gif참고)한 가지 간과

2021년 11월 20일
·
0개의 댓글
·
post-thumbnail

[JS30] - 13) Slide in on Scroll

const slideInAt = (window.scrollY + window.innerHeight) - slideImage.height / 2;얼마나 수직으로 스크롤했는지를 픽셀로 나타내는데, 더 정확히 말하면 scrollY는 현재 뷰포트 위쪽 모서리의 Y좌표를 반환한

2021년 11월 17일
·
0개의 댓글
·
post-thumbnail

[jQuery - 실습] Changing element position with Scroll

스크롤을 트리거로 요소의 좌표를 특정 구간동안 제어하는 로직을 통해 window.scrollY, .offset() 등 요소의 좌표를 반환하거나 제어하는 메서드를 심화학습한다.

2021년 5월 21일
·
0개의 댓글
·