스크롤 시 Div 스틱을 화면 상단에 표시하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

스크롤 시 Div 스틱을 화면 상단에 표시하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-12 00:24:03

원래의

603명이 탐색했습니다.

How to Make a Div Stick to the Top of the Screen on Scroll?

스크롤 시 Div를 화면 상단에 고정하는 방법

웹사이트를 스크롤할 때 특정 요소를 유지하고 싶을 수 있습니다 화면 상단에 고정되어 있습니다. 이를 달성하려면 위치 및 상단과 같은 CSS 속성을 조작할 수 있습니다.

CSS 솔루션:

CSS를 사용하여 요소를 화면 상단에 고정할 수 있습니다. 고정 위치 지정 사용:

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

로그인 후 복사

JavaScript 솔루션:

요소의 동작을 더 효과적으로 제어하려면 JavaScript와 scrollTop 기능을 사용하여 페이지 스크롤을 감지할 수 있습니다. 오프셋. 예는 다음과 같습니다.

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 &amp;&amp; !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 &amp;&amp; isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

로그인 후 복사

이 코드에서는 스크롤 오프셋이 200픽셀을 초과하면 요소의 위치가 고정 위치로 변경되고, 오프셋이 200픽셀 미만으로 떨어지면 요소가 원래 위치로 돌아가서 더 이상 상단에 고정되지 않습니다.

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