스크롤하는 동안 DIV를 제자리에 고정하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-11-21 03:53:13
원래의
667명이 탐색했습니다.

How to Keep a DIV Fixed in Place While Scrolling?

스크롤 시 DIV를 제자리에 잠그는 방법

페이지 나중에 나타나는 DIV가 있는 경우 이를 원할 수 있습니다. 스크롤 후 표시되면 제자리에 고정된 상태로 유지됩니다. 이를 달성하기 위해 이전에는 CSS만 사용하는 것이 불가능했습니다. 그러나 이제 CSS의 발전으로 가능해졌습니다.

더 자세한 설명을 보려면 이 스택 오버플로 답변을 참조하세요: https://stackoverflow.com/a/53832799/1482443

원하는 경우 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'
    });
  }
});
로그인 후 복사

이 jQuery 코드를 사용하면 초기 위치를 지나 스크롤하면 "fixme" 클래스를 사용하여 DIV의 위치를 ​​수정할 수 있습니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿