84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
특정 픽셀 수까지 스크롤되면 고정되어 제자리에 유지되는 헤더를 만들고 있습니다.
Css와 html만 사용하여 이 작업을 수행할 수 있나요? 아니면 jquery도 필요합니까?
이해하실 수 있도록 데모를 만들었습니다. 어떤 도움이라도 좋을 것입니다!
http://jsfiddle.net/gxRC9/4/
Coop의 답변을 수정했습니다. 예시를 확인해주세요FIDDLE내 수정 사항은 다음과 같습니다.
스크롤 이벤트를 처리하려면 JS가 필요합니다. 가장 좋은 방법은 특정 지점을 지나 스크롤할 때 관련 div에 할당될 고정 위치에 대한 새 CSS 클래스를 설정하는 것입니다.
HTML
CSS
jQuery
Fiddle 예:http://jsfiddle.net/gxRC9/501/
EDIT: 확장된 예
트리거 지점을 알 수 없지만 고정 요소가 화면 상단에 도달하면 트리거해야 하는 경우offset().top를 사용할 수 있습니다.
offset().top
확장 예제 바이올린:http://jsfiddle.net/gxRC9/502/
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Coop의 답변을 수정했습니다. 예시를 확인해주세요FIDDLE내 수정 사항은 다음과 같습니다.
으아아아스크롤 이벤트를 처리하려면 JS가 필요합니다. 가장 좋은 방법은 특정 지점을 지나 스크롤할 때 관련 div에 할당될 고정 위치에 대한 새 CSS 클래스를 설정하는 것입니다.
HTML
으아악CSS
으아악jQuery
으아악Fiddle 예:http://jsfiddle.net/gxRC9/501/
EDIT: 확장된 예
트리거 지점을 알 수 없지만 고정 요소가 화면 상단에 도달하면 트리거해야 하는 경우
으아악offset().top를 사용할 수 있습니다.확장 예제 바이올린:http://jsfiddle.net/gxRC9/502/