基于jquery实现页面滚动时顶部导航显示隐藏


Posted in Javascript onApril 20, 2020

本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码。分享给大家供大家参考。具体如下:

运行效果截图如下:

基于jquery实现页面滚动时顶部导航显示隐藏

具体代码如下:

引入核心文件

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

构建html,margint这个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中定义了transition: top .5s;是指.5S时间内动画展示top方向数值的改为。如添加hidden类后,top-title会在0.5s内从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实现页面滚动时顶部导航显示隐藏的总体构思,希望大家沿着这个思路完成导航显示隐藏的效果,谢谢大家阅读。

Javascript 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
Prototype框架详解
Nov 25 #Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 #Javascript
Bootstrap每天必学之下拉菜单
Nov 25 #Javascript
使用Javascript写的2048小游戏
Nov 25 #Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 #Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 #Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 #Javascript
You might like
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
js倒计时小程序
2013/11/05 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
python编写微信公众号首图思路详解
2019/12/13 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
基于Python实现粒子滤波效果
2020/12/01 Python
八一建军节感言
2014/02/28 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android