CSS와 JavaScript를 사용하여 헤더를 페이지 상단에 고정하는 방법은 무엇입니까?

CSS와 JavaScript를 사용하여 고정 헤더를 만드는 방법

문제:

한 번 수정된 후에도 고정된 헤더를 디자인하세요. 사용자가 페이지의 특정 지점을 지나 스크롤합니다. CSS와 HTML로 이를 달성할 수 있습니까, 아니면 JavaScript가 필요합니까?

CSS와 JavaScript를 사용한 솔루션:

CSS와 JavaScript를 사용하여 고정 헤더를 만들려면, 다음 단계를 따르세요.

1. HTML:
   헤더를 표시하려는 페이지에 "sticky" 클래스가 있는 요소를 추가합니다.

2. CSS: 다음 속성을 사용하여 "fixed"라는 CSS 클래스를 정의합니다.

   • 위치: 고정;
   • 상단: 0;
   • 왼쪽: 0;
   • 너비: 100%;

3. JavaScript(jQuery): 다음 JavaScript 코드를 사용하여 창 개체에 스크롤 이벤트 핸들러를 연결합니다.

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

확장 예시:

고정 헤더의 트리거 지점을 알 수 없는 경우 .offset().top 메서드를 사용하여 고정 요소가 화면 상단에 도달하는 시점을 확인할 수 있습니다. . 업데이트된 JavaScript 코드는 다음과 같습니다.

<code class="js">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>

Fiddle 예:

• 기본 예: http://jsfiddle.net/gxRC9/501/
• 확장된 예: http://jsfiddle.net/gxRC9/502/

이 접근 방식을 사용하면 CSS와 JavaScript의 조합을 사용하여 고정 헤더를 만들어 크로스 브라우저로 만들 수 있습니다. 호환 가능하고 비교적 구현이 쉽습니다.