如何用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 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
tracking.js实现前端人脸识别功能
Apr 16 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 curl模拟post请求小实例
2013/11/13 PHP
php+highchats生成动态统计图
2014/05/21 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
django form和field具体方法和属性说明
2020/07/09 Python
如何利用python进行时间序列分析
2020/08/04 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
公司员工体检通知
2015/04/21 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技