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

企鹅博客
19501
文章
0
评论
2020年3月15日02:52:34 评论 2 views 1103字阅读3分40秒

本文使用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

完整代码

继续阅读
  • 版权声明: 发表于 2020年3月15日02:52:34
  • 转载注明:https://www.qieseo.com/422171.html
Angular2模块懒加载实例详解 js教程

Angular2模块懒加载实例详解

本文主要介绍了浅谈Angular2 模块懒加载的方法,小编觉得挺不错的,现在分享给大家,希望能帮助到大家。 当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经...
不使用router-link实现页面跳转 js教程

不使用router-link实现页面跳转

这次给大家带来不使用router-link实现页面跳转,不使用router-link实现页面跳转的注意事项有哪些,下面就是实战案例,一起来看一下。 1、给父页面跳转的地方设置事件 //原来的页面上展示...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: