视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jqueryscrollTop方法根据滚动像素显示隐藏顶部导航条_jquery
2020-11-27 21:09:55 责编:小采
文档


本文使用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文件,打开可以体验效果:
代码如下:



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




  • .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);
    }
    });
    });
    });



    下载本文
    显示全文
    专题