스크롤: 제목 수정 방법

Question

특정 픽셀 수까지 스크롤되면 고정되어 제자리에 유지되는 헤더를 만들고 있습니다.

Css와 html만 사용하여 이 작업을 수행할 수 있나요? 아니면 jquery도 필요합니까?

이해하실 수 있도록 데모를 만들었습니다. 어떤 도움이라도 좋을 것입니다!

http://jsfiddle.net/gxRC9/4/

으아아아

Answer 1

Coop의 답변을 수정했습니다. 예시를 확인해주세요 FIDDLE 내 수정 사항은 다음과 같습니다.

으아아아

Answer 2

스크롤 이벤트를 처리하려면 JS가 필요합니다. 가장 좋은 방법은 특정 지점을 지나 스크롤할 때 관련 div에 할당될 고정 위치에 대한 새 CSS 클래스를 설정하는 것입니다.

HTML

으아악

CSS

으아악

jQuery

으아악

Fiddle 예: http://jsfiddle.net/gxRC9/501/

---

EDIT: 확장된 예

트리거 지점을 알 수 없지만 고정 요소가 화면 상단에 도달하면 트리거해야 하는 경우 offset().top를 사용할 수 있습니다.

으아악

확장 예제 바이올린: http://jsfiddle.net/gxRC9/502/