CSS와 JavaScript를 사용하여 스크롤 시 고정 헤더를 만드는 방법은 무엇입니까?

CSS와 JavaScript를 사용하여 스크롤에 고정 헤더 생성

이 시나리오에서는 고정되어 유지되는 헤더를 생성하는 것을 목표로 합니다. 특정 지점 이상으로 스크롤할 때 배치합니다.

CSS 및 HTML 접근 방식

CSS와 HTML만 사용하는 것만으로는 이 기능을 구현하기에 충분하지 않습니다. CSS만으로는 특정 스크롤 위치에 요소를 첨부하는 솔루션을 제공하지 않습니다.

JavaScript 통합

스크롤 시 헤더를 수정하려면 이벤트 처리에 JavaScript가 필요합니다. . 다음 단계에서는 솔루션을 개략적으로 설명합니다.

1. 고정 위치 클래스 정의:

   <code class="css">.fixed {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
   }</code>

2. 할당 수업 스크롤:

   <code class="javascript">$(window).scroll(function() {
       var sticky = $('.sticky'),
           scroll = $(window).scrollTop();
   
       if (scroll >= 100) {
           sticky.addClass('fixed');
       } else {
           sticky.removeClass('fixed');
       }
   });</code>

   여기서 스크롤 위치가 100픽셀을 초과하면 '.sticky' 요소에 'fixed' 클래스가 추가되어 제자리에 고정됩니다.

예:

다음 HTML 코드 고정 헤더 정의:

<code class="html"><div class="sticky">Header</div></code>

데모:

[Fiddle Demo](https://jsfiddle.net/gxRC9/501/)

확장된 예:

트리거가 점착 요소가 화면 상단에 도달할 때 발생해야 하며, offset().top:

<code class="javascript">var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function() {
    var sticky = $('.sticky'),
        scroll = $(window).scrollTop();

    if (scroll >= stickyOffset) {
        sticky.addClass('fixed');
    } else {
        sticky.removeClass('fixed');
    }
});</code>

Extended Demo:

[Extended Fiddle 데모](https://jsfiddle.net/gxRC9/502/)

위 내용은 CSS와 JavaScript를 사용하여 스크롤 시 고정 헤더를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!