如何用js实现鼠标向上滚动时浮动导航


Posted in Javascript onJuly 18, 2016

为什么会有这个需求呢?有没有发现在国外的一些网站,当你向上滚动时,导航条浮动在顶部位置。用户如果是想看内容就可以直接点击到达,省去很多拖动的时间,当然返回顶部也是比较容易。但有时候返回顶部这个按钮往往被人忽略了。下面一起来看看代码和演示(引入jQuery 1.9)。

判断鼠标向上滚动,或者向下滚动,可以通过对比用户的上一次滚动的坐标和下一次的坐标,当上一次小于下一次时,即用户在向下滚动,反之,则说明用户在向上滚动。滚动的坐标值可以取窗口的scrollTop。

HTML代码示例

<div id="Jnav">
 <ul class="nav">
 <li><a href="http://caibaojian.com/">WEB前端开发</a></li>
 <li><a href="#">前端开发博客</a></li>
 <li><a href="#">前端开发</a></li>
 <li><a href="#">前端开发</a></li>
 </ul>
</div>

JavaScript代码示例

var $nav = $('#Jnav'), navTop = $nav.offset().top, navH = $nav.outerHeight(),winTop_1=0,winWidth=$(window).width(), holder=jQuery('<div>');
$(window).on('scroll',function(){
 var winTop_2 = $(window).scrollTop();
 holder.css('height',navH);
 //开始浮动,不过不显示
 if(winTop_2>navTop && winWidth>980){
 holder.show().insertBefore($nav);
 $nav.addClass('fixed-nav');
 }else{
 holder.hide();
 $nav.removeClass('fixed-nav');
 }
 //判断鼠标向上滚动,显示出来
 if(winTop_2>winTop_1 && winWidth>980){
 $nav.removeClass('fixed-nav-appear');
 }else if(winTop_2<winTop_1){
 $nav.addClass('fixed-nav-appear');
 }
 winTop_1 = $(window).scrollTop();
})

CSS代码示例

.nav{width:980px; margin:0 auto;}
.nav li{display:inline-block; *display:inline; *zoom:1; margin:0 10px;}
.nav li a{display:block; padding:5px 10px;}
.fixed-nav{
 position: fixed;
 width:100%;
 top:-40px; 
 -webkit-transition: top .5s;
  -moz-transition: top .5s;
  -o-transition: top .5s;
  transition: top .5s;
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
.fixed-nav-appear{top:0;}

 

以上就是怎么用js实现鼠标向上滚动时浮动导航的示例代码,感兴趣可以参考下。

Javascript 相关文章推荐
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 #Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 #Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 #Javascript
Bootstrap 布局组件(全)
Jul 18 #Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 #Javascript
Bootstrap零基础入门教程(三)
Jul 18 #Javascript
15位和18位身份证JS校验的简单实例
Jul 18 #Javascript
You might like
PHP面向对象分析设计的经验原则
2008/09/20 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python对列表排序的方法实例分析
2015/05/16 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
python创建学生成绩管理系统
2019/11/22 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
学习Python需要哪些工具
2020/09/04 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
企业活动策划方案
2014/06/02 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
教师辞职信范文
2015/02/28 职场文书
检讨书格式
2015/05/07 职场文书
高中数学教学反思范文
2016/02/18 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python