스크롤 시 DIV 요소를 고정하는 방법은 무엇입니까?

스크롤 시 고정된 DIV 위치를 지정하는 방법

이 쿼리는 화면의 특정 지점으로 스크롤한 후 div를 고정된 상태로 유지하는 방법을 탐색합니다. 페이지. 아이디어는 9gag와 같은 웹사이트의 두 번째 광고와 유사한 효과를 만드는 것입니다. 특정 지점을 지나서 아래로 스크롤하면 고정된 것처럼 보입니다.

현재 CSS만으로는 솔루션을 제공할 수 없지만 CSS와 CSS의 조합 JavaScript는 이 효과를 얻을 수 있습니다.

jQuery 접근 방식 사용:

var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
  var currentScroll = $(window).scrollTop();
  if (currentScroll >= fixmeTop) {
    $('.fixme').css({
      position: 'fixed',
      top: '0',
      left: '0'
    });
  } else {
    $('.fixme').css({
      position: 'static'
    });
  }
});

이 코드에서 fixme는 배치할 DIV를 나타냅니다. 고정. 이 접근 방식은 스크롤 위치를 추적하고 이를 DIV의 초기 위치와 비교하는 이벤트 리스너를 추가합니다. 스크롤 위치가 DIV의 초기 위치를 초과하면 CSS 속성 position, top, left가 설정되어 DIV가 제자리에 고정됩니다. 그렇지 않으면 CSS 속성 위치가 static으로 설정되어 DIV가 정상적으로 스크롤될 수 있습니다.

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