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中的几个运算符
Jun 29 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
Vue项目打包编译优化方案
Sep 16 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
深入Nginx + PHP 缓存详解
2013/07/11 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
python中的闭包用法实例详解
2015/05/05 Python
Python字符串替换实例分析
2015/05/11 Python
简单谈谈python的反射机制
2016/06/28 Python
python机器学习之决策树分类详解
2017/12/20 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
一行python实现树形结构的方法
2019/08/09 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Python如何输出百分比
2020/07/31 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
linux下进程间通信的方式
2014/12/23 面试题
合伙经营协议书
2014/04/18 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB