Implementing the display and hiding of the top navigation when the page is scrolled based on jquery_jquery

The example in this article describes the jquery implementation of the top navigation display and hidden effect code when the page is scrolled. Share it with everyone for your reference. The details are as follows:
The screenshot of the running effect is as follows:

The specific code is as follows:

Introducing core files

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

Build html, margint is built in this div to appear scroll bar, it has no practical effect.

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

Write 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 defines transition: top .5s; refers to the change of the animation display top direction value within .5S. For example, after adding the hidden class, top-title will be animated from top's 0 to -90PX within 0.5s.
Write 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');
    }        
 
   });
});

The above is the overall idea of ​​displaying and hiding the top navigation when scrolling the page based on jquery. I hope you can follow this idea to complete the effect of displaying and hiding the navigation. Thank you for reading.