基于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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
js实现验证码功能
Jul 24 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
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
第八节--访问方式
2006/11/16 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
详解JS函数重载
2014/12/04 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
node使用request请求的方法
2019/12/20 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
Python中的True,False条件判断实例分析
2015/01/12 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
广告学专业推荐信范文
2013/11/23 职场文书
银行演讲稿范文
2014/01/03 职场文书
运动会广播稿80字
2014/01/23 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
MySQL学习之基础操作总结
2022/03/19 MySQL