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

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

CSS, HTML로 구현

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

JavaScript(jQuery)의 역할

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

HTML 코드

CSS 코드

.fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
}

jQuery 코드

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

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

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

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

요소를 수정하기 위한 트리거 포인트를 알 수 없는 경우 다음과 같을 수 있습니다. offset().top.

var stickyOffset = $('.sticky').offset().top;

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

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

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

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