화면 상단에 고정되는 스크롤링 Div를 만드는 방법은 무엇입니까?

화면 상단에 고정되는 스크롤 Div 만들기

요소가 화면 상단에 고정된 상태로 유지되도록 하려는 경우 페이지가 스크롤되면 "고정" div를 만들 수 있습니다. 방법은 다음과 같습니다.

순수 CSS 사용:

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

jQuery를 사용한 대체 방법:

jQuery를 사용하면 다음을 수행할 수 있습니다. 더 많은 유연성으로 동일한 효과를 얻을 수 있습니다. 다음과 같이 요소를 배치합니다.

.fixedElement {
    position: absolute;
    top: 100px; // Replace with desired initial top offset
}

그런 다음 JavaScript를 사용하여 스크롤 오프셋을 감지합니다.

$(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': 'absolute', 'top': '100px'}); // Adjust top offset as needed
  } 
});

스크롤 오프셋이 지정된 값(이 예에서는 200px)을 초과하면 div 화면 상단에 고정됩니다. 스크롤 오프셋이 해당 값 아래로 떨어지면 초기 위치로 돌아갑니다.

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