jQuery 없이 CSS와 JavaScript로 고정 헤더를 만드는 방법은 무엇입니까?

스크롤 시 헤더 수정

스크롤해도 계속 표시되는 헤더를 생성할 때 jQuery 없이도 CSS와 HTML만 사용하여 이 동작을 구현할 수 있습니다.

CSS 및 HTML 솔루션

고정 헤더 클래스 소개:

<code class="css">.sticky-header {
  width: 700px;
  height: 50px;
  background: orange;
  position: fixed;
}</code>

HTML에서 "고정" 클래스가 있는 div를 추가하세요.

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

스크롤 이벤트용 자바스크립트

헤더 고정을 정밀하게 제어하려면 스크롤 이벤트에 자바스크립트가 필요합니다.

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

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

확장 예시

고정 지점을 결정하려면 화면에서 고정 요소의 위치에 따라 offset().top:

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

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

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

을 사용하세요.

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