摘要:本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条。 scrollTop的介绍: 语法 $(selector).scrollTop(offset) 参数 offset 描述 可选。规定相对滚动条顶部的偏移,以像素计。 定义和用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。 如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。 提示和注释 注释:该方法对于可见元素和不可见元素均有效。 注释:当用于获取值时,该方法只返回第一个匹配元素的 scroll top offset。 注释:当用于设置值时,该方法设置所有匹配元素的 scroll top offset。 附完整代码,保存到html文件,打开可以体验效果:

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条。

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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="https://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
</head>
<body>
<p id="topmenu_keleyi_com"><ul><li><a href="https://www.keleyi.com/menu/net/" target="_blank">.NET</a></li><li><a href="https://www.keleyi.com/menu/javascript/" target="_blank">Javascript</a></li><li><a href="https://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a></li><li><a href="https://www.keleyi.com/menu/csharp/" target="_blank">C#</a></li><li><a href="https://www.keleyi.com/menu/other/" target="_blank">其他</a></li><li><a href="https://www.keleyi.com/" target="_blank">首页</a></li></ul></p>
<p style="background-color:#959822; width:100%;height:150px;">请滚动鼠标使页面向下</p>
<p style="background-color:Green; width:100%;height:150px;">www.keleyi.com</p>
<p style="background-color:Red; width:100%;height:150px;">欢迎</p>
<p style="background-color:Yellow; width:100%;height:150px;">hi</p>
<p style="background-color:Silver; width:100%;height:150px;">柯乐义</p>
<p style="background-color:Aqua; width:100%;height:150px;">keleyi.com</p>
<p style="background-color:Fuchsia; width:100%;height:150px;">keleyi</p>
<p style="background-color:Green; width:100%;height:150px;">keleyi.com</p>
<p style="background-color:Blue; width:100%;height:150px;">柯乐义</p>
<p style="background-color:Olive; width:100%;height:150px;">柯乐义 监视下滚像素</p>
<p style="background-color:Green; width:100%;height:150px;">A</p>
<p style="background-color:Purple; width:100%;height:150px;">jquery</p>
<p style="background-color:Green; width:100%;height:150px;"><a href="https://www.keleyi.com/a/bjac/f4a6f78d74a251c5.htm" target="_blank">原文</a></p>
<p style="background-color:Lime; width:100%;height:150px;">keleyi.com</p>
<p style="background-color:Orange; width:100%;height:150px;">完整代码</p>
<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的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条。

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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="https://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
</head>
<body>
<p id="topmenu_keleyi_com"><ul><li><a href="https://www.keleyi.com/menu/net/" target="_blank">.NET</a></li><li><a href="https://www.keleyi.com/menu/javascript/" target="_blank">Javascript</a></li><li><a href="https://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a></li><li><a href="https://www.keleyi.com/menu/csharp/" target="_blank">C#</a></li><li><a href="https://www.keleyi.com/menu/other/" target="_blank">其他</a></li><li><a href="https://www.keleyi.com/" target="_blank">首页</a></li></ul></p>
<p style="background-color:#959822; width:100%;height:150px;">请滚动鼠标使页面向下</p>
<p style="background-color:Green; width:100%;height:150px;">www.keleyi.com</p>
<p style="background-color:Red; width:100%;height:150px;">欢迎</p>
<p style="background-color:Yellow; width:100%;height:150px;">hi</p>
<p style="background-color:Silver; width:100%;height:150px;">柯乐义</p>
<p style="background-color:Aqua; width:100%;height:150px;">keleyi.com</p>
<p style="background-color:Fuchsia; width:100%;height:150px;">keleyi</p>
<p style="background-color:Green; width:100%;height:150px;">keleyi.com</p>
<p style="background-color:Blue; width:100%;height:150px;">柯乐义</p>
<p style="background-color:Olive; width:100%;height:150px;">柯乐义 监视下滚像素</p>
<p style="background-color:Green; width:100%;height:150px;">A</p>
<p style="background-color:Purple; width:100%;height:150px;">jquery</p>
<p style="background-color:Green; width:100%;height:150px;"><a href="https://www.keleyi.com/a/bjac/f4a6f78d74a251c5.htm" target="_blank">原文</a></p>
<p style="background-color:Lime; width:100%;height:150px;">keleyi.com</p>
<p style="background-color:Orange; width:100%;height:150px;">完整代码</p>
<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技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_1536.html