스크롤 반응하는 변하는 헤더 | Header change on scroll

안녕하세요.

디블리셔 미덜입니다.

 

 

위 : 기본 헤더 / 아래 : 스크롤 시 나타날 헤더

 

 

디자인을 할때에, 보통은 기본 헤더와 스크롤 내렸을때 나타나는 헤더 2가지 종류의 디자인을 하게 됩니다.

스크롤시 background가 변하거나, botom border가 나타나거나 하는 방식으로 말이죠.

 

오늘은, 이렇게 스크롤에 반응하여 변하는 header 소스를 공유하려고합니다. 

첫번째로는, 스크롤을 감지했을 때 헤더가 변하게 하는 스크립트와

두번째로는, 위의 스크립트를 응용하여 특정 위치에 도달했을 때, 헤더가 변하게하는 스크립트입니다.

 

 

---

 

01 스크롤 감지 시 헤더 변하기

See the Pen Header change on scroll by 노미선 (@tpmtdbes) on CodePen.

 

02 특정 위치에서 헤더 변하기

See the Pen Header change on scroll 2 by 노미선 (@tpmtdbes) on CodePen.

 

 

 

소스복붙을 했는데도 제대로 적용이 안 된다 하시는 분들은

아래의 첨부 파일을 다운로드하셔서 적용해 보시기 바랍니다.

01 스크롤 감지 시 헤더 변하기.html

0.00MB

02 특정 위치에서 헤더 변하기.html

0.00MB