800px 이후 스크롤 시 Div를 표시하는 방법은 무엇입니까?

800px 이후 스크롤 다운 시 Div 표시

소개

이 글에서는 지정된 지점을 지나 스크롤 다운할 때 숨겨진 div가 표시되는 문제에 대해 설명합니다. 웹페이지에서. 목표는 사용자가 페이지 상단에서 800픽셀을 스크롤한 후 이를 달성하는 동시에 위로 스크롤할 때 div가 숨겨지고 스크롤 높이가 800픽셀 미만이 되도록 하는 것입니다.

HTML 구조

해당 div의 HTML은 다음과 같습니다.

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

CSS 스타일링

다음 CSS가 div에 적용됩니다.

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

jQuery 스크립트

최초 제공 jQuery 스크립트:

$(document).ready(function() {
    $(window).scroll( function(){
        $('.bottomMenu').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

수정된 jQuery 스크립트 원하는 기능을 위해

원하는 기능을 얻으려면 jQuery 스크립트를 다음과 같이 수정해야 합니다. 다음은 다음과 같습니다.

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

결론

이 수정된 jQuery 스크립트는 페이지 상단에서 800픽셀 이상 아래로 스크롤한 후 div를 표시합니다. 위로 스크롤할 때 스크롤 높이가 800픽셀 미만이면 div가 숨겨집니다.

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