스크롤 위치에 따라 Div를 표시하고 숨기는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

스크롤 위치에 따라 Div를 표시하고 숨기는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-12-13 00:42:09

원래의

803명이 탐색했습니다.

How to Show and Hide a Div Based on Scroll Position?

상단에서 800px 스크롤한 후 숨겨진 Div 표시

시나리오:

사용자 다음에 숨겨진 div를 표시하려고 합니다. 페이지를 800픽셀 아래로 스크롤합니다. 또한 사용자가 위로 스크롤하고 높이가 800px 미만인 경우 div는 사라져야 합니다.

HTML 구조:

<div class="bottomMenu">
  <!-- Content -->
</div>

로그인 후 복사

CSS:

.bottomMenu {
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0px;
    z-index: 100;
    opacity: 0;
}

로그인 후 복사

자바스크립트 (jQuery):

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

로그인 후 복사

설명:

이 스크립트는 문서의 스크롤 위치를 모니터링합니다. 스크롤 위치가 800픽셀보다 커지면 .bottomMenu div에 대한 페이드인 애니메이션이 트리거됩니다. 반대로 스크롤 위치가 800픽셀 아래로 떨어지면 페이드아웃 애니메이션이 실행됩니다.

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