html 滚动隐藏导航,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文件，打开可以体验效果：

监视滚动像素，显示或隐藏顶部导航条-柯乐义

#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;}

• .NET
• Javascript
• jQuery
• C#
• 其他
• 首页

请滚动鼠标使页面向下

www.keleyi.com

欢迎

hi

柯乐义

keleyi.com

keleyi

keleyi.com

柯乐义

柯乐义 监视下滚像素

A

jquery

原文

keleyi.com

完整代码

$(function () {

//当滚动条的位置处于距顶部200像素以下时，顶部导航出现，否则消失

$(function () {

$(window).scroll(function () {

if ($(window).scrollTop() > 200) {

$("#topmenu_keleyi_com").fadeIn(100);

}

else {

$("#topmenu_keleyi_com").fadeOut(100);

}

});

});

});