jquery_jquery를 기반으로 페이지 스크롤 시 상단 네비게이션 표시 및 숨기기 구현

이 문서의 예에서는 페이지를 스크롤할 때 상단 탐색 표시 및 숨겨진 효과 코드의 jquery 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

코어 파일 소개

<script src="js/jquery/1.11.1/jquery.min.js"></script>

html을 빌드합니다. 이 div에 마진이 내장되어 스크롤 막대가 표시되지만 실질적인 효과는 없습니다.

<div class="top-title">这是顶部导航条</div>
<div class="margint"><p>滚动看效果</p><p>滚动看效果</p></div>

CSS 작성

.top-title {background:#e74c3c;color:white;font-size:24px;padding:5px;text-align:center;position: fixed;left:0;top:0;width:100%;transition: top .5s;}
.hiddened{top: -90px;}
.showed{top:0;z-index: 9999;}

top-title은 전환을 정의합니다. top .5s는 .5S 내에서 애니메이션 표시 상단 방향 값의 변경을 나타냅니다. 예를 들어, 히든 클래스를 추가한 후 top-title은 0.5초 이내에 top의 0에서 -90PX까지 애니메이션됩니다.
JS 작성

$(function(){  
  var winHeight = $(document).scrollTop();
 
  $(window).scroll(function() {
    var scrollY = $(document).scrollTop();// 获取垂直滚动的距离，即滚动了多少
 
    if (scrollY > 550){ //如果滚动距离大于550px则隐藏，否则删除隐藏类
      $('.top-title').addClass('hiddened');
    } 
    else {
      $('.top-title').removeClass('hiddened');
    }
 
    if (scrollY > winHeight){ //如果没滚动到顶部，删除显示类，否则添加显示类
      $('.top-title').removeClass('showed');
    } 
    else {
      $('.top-title').addClass('showed');
    }        
 
   });
});

위는 jquery를 기반으로 페이지를 스크롤할 때 상단 탐색을 표시하고 숨기는 전체 아이디어입니다. 이 아이디어를 따라 탐색 표시 및 숨기기 효과를 완성하시기 바랍니다.