脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 显示隐藏顶部导航条

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

 更新时间：2013年05月27日 17:31:13   作者：  
使用jquery的scrollTop方法监视页面垂直滚动像素，并根据像素隐藏或者显示顶部的导航条，具体实现代码如下，感兴趣的朋友可以参考下哈
本文使用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>
您可能感兴趣的文章:

相关文章

  • jquery拖拽效果完整实例(附demo源码下载)

    jquery拖拽效果完整实例(附demo源码下载)

    这篇文章主要介绍了jquery拖拽效果实现方法,详细介绍了jQuery实现拖拽功能的具体步骤与相关技巧,并附代码了demo源码供读者下载参考,需要的朋友可以参考下
    2016-01-01
  • 遍历jquery对象的代码分享

    遍历jquery对象的代码分享

    今天遇到一个问题需要获取tagName，使用jquery，查询了一下，大家说用$("dd").attr("tagName")能获取到，但是得到的返回值是undefined，于是又查询饿了许久，返回遍历了一下jquery封装的对象
    2011-11-11
  • jquery 图片预加载 自动等比例缩放插件

    jquery 图片预加载 自动等比例缩放插件

    在图片加载前显示一个加载标志，当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能
    2008-12-12
  • jQuery移除tr无效的解决方法(tr是动态添加)

    jQuery移除tr无效的解决方法(tr是动态添加)

    移除掉某些tr（tr是动态添加的）尝试了很多方法，都不见效，后来发现个不错的方法，于是与大家分享下
    2014-09-09
  • JQuery Jcrop 实现图片裁剪的插件

    JQuery Jcrop 实现图片裁剪的插件

    非常不错的模拟 图片裁剪效果的实现代码，文件都是脚本之家本地的，大家可以直接另存为就可以了。
    2009-05-05
  • 基于jQuery的可以控制左右滚动及自动滚动效果的代码

    基于jQuery的可以控制左右滚动及自动滚动效果的代码

    迷上jQuery,相对于原生JavaScript,它是如此的美妙.也因此,促使我更加的努力的研习原生JavaScript.
    2010-07-07
  • jQuery常用知识点总结以及平时封装常用函数

    jQuery常用知识点总结以及平时封装常用函数

    这篇文章主要介绍了jQuery常用知识点总结以及平时封装常用函数 的相关资料,需要的朋友可以参考下
    2016-02-02
  • jQuery使用$.ajax提交表单完整实例

    jQuery使用$.ajax提交表单完整实例

    这篇文章主要介绍了jQuery使用$.ajax提交表单的方法,以完整实例形式分析了jQuery基于ajax数据提交的具体步骤与数据处理技巧,非常简单实用,代码备有详尽的注释便于理解,需要的朋友可以参考下
    2015-12-12
  • 使用jQuery实现掷骰子游戏

    使用jQuery实现掷骰子游戏

    这篇文章主要介绍了使用jQuery实现掷骰子游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • jQuery数据类型小结(14个)

    jQuery数据类型小结(14个)

    jQuery除了包含原生JS中的内置数据类型(built-in datatype)，还包括一些扩展的数据类型(virtual types)，如Selectors、Events等，通过本文给大家分享14个jquery数据类型，感兴趣的朋友一起学习吧
    2016-01-01

最新评论