本文描述了jquery实现页面滚动时顶部导航和显示隐藏效果的代码。分享给大家参考。具体如下：运行效果截图如下：

具体代码如下：

介绍核心文件。

script src=' http : js/jquery/1 . 11 . 1/jquery . min . js '/script构建html，margint在这个div中为滚动条构建，没有实际效果。

Class=' top-title '这是顶部导航栏div class=' margin ' p滚动效果/pp滚动效果/p/div编写CSS。top-title { background : # e74c 3c；颜色：白色；font-size :24 px；padding:5px文本对齐：居中；位置：固定；left:0top:0宽度：100%；transition: top .5s}.hidden ed { top :-90px；}.显示{ top:0z-index : 9999；}top-title中定义了transition: top .5s指. 5s内动画显示顶部方向数值的变化.如果添加了隐藏类，顶部标题将在0.5s Write JS中从顶部的0动画缓冲到-90PX

$(函数(){ var winHeight=$(文档))。scroll top()；$(窗口)。scroll(function(){ var scrollY=$(document))。scroll top()；//获取垂直滚动距离，即如果(scrolly550)已经滚动了多少{//如果滚动距离大于550px，将其隐藏，否则删除隐藏类$()。顶端标题')。addclass('隐藏')；} else { $('。顶端标题')。remove CLaSS(' hidden ed ')；} if(scrollwinheight){//如果不滚动到顶部，删除显示类；否则，添加显示类$('。顶端标题')。removeclass('显示')；} else { $('。顶端标题')。addCLaSS(' showed ')；} });});以上是基于jquery滚动时隐藏页面顶部导航显示的一般思路。希望你能沿着这条思路完成隐藏导航显示的效果。感谢阅读。