本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下：
具体代码如下：
引入核心文件
构建html，
margint这个div中为了出现滚动条而建，并无实际作用。写入CSS
top-title中定义了transition: top .5s;是指.5S时间内动画展示top方向数值的改为。如添加hidden类后，top-title会在0.5s内从top的0动画缓冲到-90PX。
写入JS
$(window).scroll(function() {
var scrollY = $(document).scrollTop();// 获取垂直滚动的距离，即滚动了多少
var scrollY = $(document).scrollTop();// 获取垂直滚动的距离，即滚动了多少
if (scrollY > 550){ //如果滚动距离大于550px则隐藏，否则<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>隐藏类
$('.top-title').addClass('hiddened');
}
else {
$('.top-title').removeClass('hiddened');
}
if (scrollY > winHeight){ //如果没滚动到顶部，<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a><a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>类，否则<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a><a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>类
$('.top-title').removeClass('showed');
}
else {
$('.top-title').addClass('showed');
} });
});
以上就是基于jquery实现页面滚动时顶部导航显示隐藏的总体构思，希望大家沿着这个思路完成导航显示隐藏的效果，谢谢大家阅读。
原文链接：https://www.f2er.com/jquery/51499.html