사이트 내 유용한 기능! Sticky 속성의 매력

 

안녕하세요 찐망고입니다.

 

오늘은 position속성 중 sticky를 써볼 건데요..

position관련 CSS를 포스팅 해놓은 게 없네요? 이런;;

 

html에서 포지션역할은 여러 가지가 있습니다.

잘 쓰면 너무 좋은 데 absolute를 남발하는 개발자들 보면 단전에서부터 화가..

요즘은 그러신 분 안 계시죠? 

 

sticky를 아직 안 써본 분이 계시려나..

아마 ie에선 지원을 안 해서 쓰고 싶어도 못쓰는 그런일들이 있었죠.

 

sticky속성은 relative와 fixed가 같이 적용된다고 생각하면 되는데요.

 

https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky

W3Schools online HTML editor

 

sticky클래스를 가진 div요소를 보시면

top값에 맞춰 일단 이동은 합니다 지금은 top: 0이니까 원래 요소의 위치로 자리를 잡고 있다가

스크롤이 해당 요소를 지나가는 순간 

fixed처리되면서 top: 0에 맞춰 상단에 올라가죠?

 

너무 쉽지 않나요? 저거 예전에 다 js로 했다고...

 

 

sticky적용 사이트들 보실까요

https://www.ahnlab.com/ko

AhnLab

안랩 sticky섹션

 

 

https://www.hazzys.com/display.do?cmd=getHomeMain&MAIN_YN=Y&OUTLET_ROUTE=N

HAZZYSㅣ온라인 공식 플래그십 스토어

헤지스  sticky섹션

 

 

https://www.mathpro.co.kr/

매쓰프로 - 수학문제은행

매쓰프로  sticky섹션

 

 

 

 

 

아래 적용 방법을 참고해보세요 

 

See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen.