스크롤 시 고정된 부동 Div를 어떻게 만들 수 있나요?

스크롤에 떠 있는 Div: 종합 가이드

스크롤한 후에도 화면 상단에 고정되어 있는 div가 필요한 경우를 본 적이 있습니다. 초기 위치를 지나서? 이 일반적인 웹 개발 시나리오는 쉽게 달성할 수 있으며 이 기사에서는 자세한 로드맵을 제공합니다.

시작하려면 CSS 솔루션을 고려하세요. div의 위치를 ​​고정으로 설정하면 위치가 그대로 유지되도록 할 수 있습니다.

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

그러나 보다 동적인 접근 방식을 위해서는 jQuery를 사용하는 것이 좋습니다. 처음에는 div를 절대적으로 배치하고 원하는 스크롤 위치에 도달하면 상단 오프셋이 0인 고정 위치로 전환합니다.

$(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'}); 
  } 
});

scrollTop 기능을 사용하면 스크롤 오프셋이 지정된 지점에 도달하는 시점을 감지합니다(예: , 200픽셀). 이 임계값에서 그에 따라 요소의 위치를 ​​전환하여 스크롤 시 화면 상단에 "고정"되도록 합니다.

위 내용은 스크롤 시 고정된 부동 Div를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!