스크롤할 때 Div 스틱을 화면 상단에 만드는 방법은 무엇입니까?

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

소개:
div를 만들고 싶습니다. 스크롤할 때 화면 상단에 계속 붙어 있는 것은 일반적인 웹 디자인 요구 사항입니다. 이 기능은 CSS 위치 지정 및 JavaScript 조작을 포함한 다양한 방법을 통해 달성할 수 있습니다.

CSS 위치 지정:
간단한 접근 방식은 CSS에서 고정 위치 지정을 사용하는 것입니다.

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

이 CSS를 사용하면 요소는 스크롤에 관계없이 화면을 기준으로 동일한 위치에 유지됩니다. 그러나 스크롤된 위치에 따라 요소의 위치를 ​​동적으로 변경해야 하는 경우 이 방법은 적합하지 않을 수 있습니다.

JavaScript 조작:
상단에 고정되는 div를 생성하려면 스크롤된 경우에만 CSS와 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': 'static', 'top': '0px'});
  } 
});

이 코드에서:

• $el은 클래스가 있는 요소를 나타냅니다. 'fixedElement'.
• isPositionFixed는 요소가 이미 고정되어 있는지 확인합니다. position.
• 스크롤 오프셋($(this).scrollTop()으로 결정)이 200px에 도달하고 요소가 고정되지 않으면 고정되도록 설정되어 상단에 배치됩니다.
• 스크롤 오프셋이 200px 미만이고 요소가 고정되면 원래 위치로 재설정됩니다.

이 접근 방식은 스크롤 동작에 따라 요소의 위치를 ​​동적으로 조정합니다.

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