CSS, HTML 및 jQuery를 사용하여 고정 헤더를 만드는 방법은 무엇입니까?

CSS, HTML, jQuery를 사용하여 스크롤 시 헤더 수정

페이지를 아래로 스크롤해도 고정된 상태로 유지되는 헤더를 만드는 것은 일반적인 디자인 요구 사항. 이는 CSS, HTML 및 JavaScript(jQuery)의 조합을 사용하여 달성할 수 있습니다.

CSS, HTML로 구현

CSS는 고정된 위치를 제공합니다. 스크롤에 관계없이 페이지에서의 위치를 ​​고정하기 위해 요소에 적용할 수 있는 속성입니다. 그러나 이를 위해서는 요소가 수정되어야 하는 시점을 결정하는 트리거 포인트가 필요합니다.

JavaScript(jQuery)의 역할

스크롤 이벤트를 모니터링하고 이를 결정하려면 JavaScript가 필요합니다. 헤더 요소에 고정 클래스를 적용할 시기. jQuery를 사용하면 스크롤 이벤트를 감지하고 그에 따라 고정 클래스를 추가하거나 제거하는 간단한 스크립트를 작성할 수 있습니다.

HTML 코드

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

CSS 코드

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

jQuery 코드

<code class="javascript">$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

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

이 예에서는 스크롤 위치(scrollTop)를 초과할 때 고정 요소에 고정 클래스가 적용됩니다. 100픽셀. 특정 설계 요구 사항에 따라 이 값을 조정할 수 있습니다.

확장된 예: 동적 트리거 포인트

요소를 고정하기 위한 트리거 포인트를 알 수 없는 경우 다음과 같을 수 있습니다. 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>

이 코드는 고정 요소의 수직 위치를 동적으로 측정하고 뷰포트 상단에 도달하면 이를 수정합니다.

이를 결합하여 기술을 사용하면 CSS, HTML 및 jQuery를 사용하여 고정 헤더를 만들 수 있습니다.

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