获取离滚动页面的顶部距离有两种方法一是DOM;而是jquery,具体的实现如下,感兴趣的朋友可以尝试操作下
 
 
方法一:DOM

复制代码 代码如下:
<script>
window.onscroll = function() {
console.info(window.scrollY);
}
</script>

注册onscroll事件,在控制台(按F12)打印当前页面距离页面顶部的距离(单位:像素px)

方法二:jQuery

复制代码 代码如下:
$(function() {
$(window).scroll(function() {
console.info($(window).scrollTop());
});
});

调用window对象的scroll方法注册滚动事件,调用window对象的scrollTop方法,意义同scrollY属性。 

HTML页面滚动时获取离页面顶部的距离2种实现方法的更多相关文章

  1. JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)

      先看效果:     阅读前提:充分理解div的三种定位方式:浮动,相对定位,绝对定位 方法一(顶部)      原理:直接使用css 进行控制:缺点:不兼容ie6-:      实现:positi ...

  2. jquery页面滚动,菜单固定到顶部

    // 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...

  3. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  4. Javascript实现页面滚动时导航智能定位

    遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度 ...

  5. 使用 jQuery Ajax 在页面滚动时从服务器加载数据

    简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...

  6. ios真机使用fixed定位页面滚动时fixed定位的元素也会跟着滚动

    到了ios真机APP中,页面向下滚动,fixed的元素也跟着滚,虽然最后它还是到了它该在的地方,但是它跟着滚动也很影响页面的流畅性和交互性好伐.

  7. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  8. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  9. CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

随机推荐

  1. 二、ARM处理器

    2.1 介绍 ARM核心的基本结构指ARM架构显示处理器中处理的数据大小.指令架构.寄存器等的结构和运行原理 ARM核心是利用ARM架构的基本原理实现的处理器核心部分. ARM的主要架构如下: ARM ...

  2. bzoj4802 欧拉函数(附Millar-Rabin和Pollard-Rho讲解)

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4802 [题解] 参考:http://www.matrix67.com/blog/archiv ...

  3. odp.net连接方式,部署问题总结

      一. 摘要 在C#开发的过程中,经常需要操作Oracle数据库,而实际在部署程序的时候,经常要根据系统环境(32.64bit).不安装Oracle客户端等等需求,而Odp.net 也没有完美兼容的 ...

  4. jzoj4313 电话线铺设(最小生成树+最近公共祖先)

    题面 \(solution:\) 这道题很奇妙,需要对kruskal重构树有足够的了解!我们先对王牌电缆实行kruskal重构树,然后我们再来枚举每一条李牌电缆,我们将某一条李牌电缆加进这棵树中必然构 ...

  5. ANR异常及traces信息解析

    Application Not Responding:默认情况下,在android中Activity的最长执行时间是5秒,BroadcastReceiver的最长执行时间则是10秒.超出就会提示应用程 ...

  6. session和cookies

    Cookie 与session的产生过程                                 我们都知道HTTP协议本身是无状态的,客户只需要简单的向服务器来发送请求下载某些文件,客户端向 ...

  7. [转]GDB-----2.watchpoint

    TODO需要在ARM下验证 1. 前言 watchpoint,顾名思义,其一般用来观察某个变量/内存地址的状态(也可以是表达式),如可以监控该变量/内存值是否被程序读/写情况. 在gdb中可通过下面的 ...

  8. Ubuntu 下更简单的防火墙 Uncomplicated Firewall

    一看名字就十分的明确“不复杂防火墙”没错,它就是 ufw,在 Ubuntu 操作系统当中已经内置,使用它可以简单快速的操作防火墙的功能,比如开关端口,访问 IP,限制连接等等等等.它与一系列 Linu ...

  9. linux下快速安装jenkins

    Linux下快速安装Jenkins 建议使用 FileZilla 工具简化以下步骤中移动.环境变量配置等步骤. 1      软件下载 l  Java:jdk-7u17-linux-x64.tar.g ...

  10. saltstack中如何实现多个master来管理minion

    背景: 公司有多个部门,有一些机器有本部门的业务,这些机器也有其他部门的业务,所以本部门需要一个master服务器来管理这批机器,其他部门也需要一个master服务器来管理这个机器,所以就需要多个ma ...