jquery scrollTop方法根据滚动像素显示隐藏顶部导航条


Posted in Javascript onMay 27, 2013

本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条。
效果预览网址:http://www.keleyi.com/keleyi/phtml/scrolloversee.htm

scrollTop的介绍:

语法
$(selector).scrollTop(offset)

参数
offset
描述
可选。规定相对滚动条顶部的偏移,以像素计。

定义和用法
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。

提示和注释
注释:该方法对于可见元素和不可见元素均有效。
注释:当用于获取值时,该方法只返回第一个匹配元素的 scroll top offset。
注释:当用于设置值时,该方法设置所有匹配元素的 scroll top offset。

附完整代码,保存到html文件,打开可以体验效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.keleyi.com/1999/xhtml"> 
<head> 
<title>监视滚动像素,显示或隐藏顶部导航条-柯乐义</title> 
<style type="text/css"> 
#topmenu_keleyi_com{position:fixed;top:0px;left:0px;right:0px;width:800px;margin-left:auto;margin-right:auto;height:50px;background-color:transparent;display:none;} 
#topmenu_keleyi_com li{float:left; 
list-style:none; 
margin-right:1px; 
width:116px; 
background-color:#e0f0e0; 
} 
#topmenu_keleyi_com ul{ margin:0px;padding:0px;} 
body{margin:0px;} 
</style> 
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> 
</head> 
<body> 
<div id="topmenu_keleyi_com"><ul><li><a href="http://www.keleyi.com/menu/net/" target="_blank">.NET</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">Javascript</a></li><li><a href="http://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a></li><li><a href="http://www.keleyi.com/menu/csharp/" target="_blank">C#</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">其他</a></li><li><a href="http://www.keleyi.com/" target="_blank">首页</a></li></ul></div> 
<div style="background-color:#959822; width:100%;height:150px;">请滚动鼠标使页面向下</div> 
<div style="background-color:Green; width:100%;height:150px;">www.keleyi.com</div> 
<div style="background-color:Red; width:100%;height:150px;">欢迎</div> 
<div style="background-color:Yellow; width:100%;height:150px;">hi</div> 
<div style="background-color:Silver; width:100%;height:150px;">柯乐义</div> 
<div style="background-color:Aqua; width:100%;height:150px;">keleyi.com</div> 
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div> 
<div style="background-color:Green; width:100%;height:150px;">keleyi.com</div> 
<div style="background-color:Blue; width:100%;height:150px;">柯乐义</div> 
<div style="background-color:Olive; width:100%;height:150px;">柯乐义 监视下滚像素</div> 
<div style="background-color:Green; width:100%;height:150px;">A</div> 
<div style="background-color:Purple; width:100%;height:150px;">jquery</div> 
<div style="background-color:Green; width:100%;height:150px;"><a href="http://www.keleyi.com/a/bjac/f4a6f78d74a251c5.htm" target="_blank">原文</a></div> 
<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</div> 
<div style="background-color:Orange; width:100%;height:150px;">完整代码</div> 
<script type="text/javascript"> 
$(function () { 
//当滚动条的位置处于距顶部200像素以下时,顶部导航出现,否则消失 
$(function () { 
$(window).scroll(function () { 
if ($(window).scrollTop() > 200) { 
$("#topmenu_keleyi_com").fadeIn(100); 
} 
else { 
$("#topmenu_keleyi_com").fadeOut(100); 
} 
}); 
}); 
}); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
js自定义回调函数
Dec 13 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 #Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 #Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 #Javascript
使用jquery实现div的tab切换实例代码
May 27 #Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 #Javascript
jquery实现的一个导航滚动效果具体代码
May 27 #Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 #Javascript
You might like
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
微信小程序实现点击图片放大预览
2019/10/21 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
简单介绍Python中的round()方法
2015/05/15 Python
用Python编写简单的微博爬虫
2016/03/04 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
图解Python变量与赋值
2018/04/03 Python
python字典改变value值方法总结
2019/06/21 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
安全生产计划书
2014/05/04 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
2014年药房工作总结
2014/11/22 职场文书
公路施工安全责任书
2015/05/08 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
python编写五子棋游戏
2021/05/25 Python