스크롤 시 Div를 화면 상단에 고정하는 방법은 무엇입니까?

스크롤 시 Div를 화면 상단에 고정

웹페이지에서 요소 위치를 지정하면 사용자 경험과 구성이 향상될 수 있습니다. 일반적인 시나리오 중 하나는 div가 특정 스크롤 지점에 도달할 때 화면 상단에 고정하는 것입니다.

이를 달성하기 위해 여러 가지 접근 방식이 있으며 그 중 하나는 CSS를 독점적으로 활용하는 것입니다. 요소의 위치를 ​​고정으로 설정하면 요소가 다음 위치로 스크롤된 후에도 화면 상단에 고정된 상태로 유지됩니다.

.fixedElement {
  background-color: #c0c0c0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

그러나 이 접근 방식에서는 요소가 처음에 절대적으로 위치한다고 가정합니다. 원하는 스크롤 오프셋이 충족되면 해당 위치를 고정으로 변경하고 top 속성을 0으로 재설정해야 합니다. 스크롤 오프셋을 결정하기 위해 JavaScript를 사용하여 문서의 scrollTop 기능을 모니터링할 수 있습니다.

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

이 스크립트에서는 스크롤 오프셋이 200픽셀에 도달하면 요소가 상단의 고정 위치로 전환됩니다. 화면의. 오프셋이 200픽셀 미만으로 떨어지면 요소가 이전 위치로 되돌아갑니다. 이 기술을 사용하면 사용자가 페이지를 스크롤할 때 div가 원활하게 전환됩니다.

위 내용은 스크롤 시 Div를 화면 상단에 고정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!