[JS30] - 13) Slide in on Scroll

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

innerHeightoffsetTopscrollYcoordinatescoordinates

[JS30] - 24) Sticky Nav

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

offsetHeightoffsetToppaddingTopscrollYoffsetHeight