获取离滚动页面的顶部距离有两种方法一是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. Python入门系列教程(一)基础

    基础知识 1.变量及类型 2.换行\n 3.输入 password = raw_input("请输入密码:") print '您刚刚输入的密码是:', password 4.格式化 ...

  2. 自动提取文件系统---binwalk(一)

    Binwalk是路由器固件分析的必备工具,该工具最大的优点就是可以自动完成指定文件的扫描,智能发掘潜藏在文件中所有可疑的文件类型及文件系统. 1.Binwalk和libmagic Binwalk的扫描 ...

  3. win7防火墙端口开放

    https://jingyan.baidu.com/article/f96699bbadafca894f3c1b7a.html

  4. linux 中的 open() read() write() close() 函数

    1. open()函数 功能描述:用于打开或创建文件,在打开或创建文件时可以指定文件的属性及用户的权限等各种参数. 所需头文件:#include <sys/types.h>,#includ ...

  5. WEBSHELL恶意代码批量提取清除工具

    场景 使用D盾扫描到WEBSHELL后可以导出有路径的文本文件. 最后手动去把WEBSHELL复制到桌面然后以文件路径命名,挨个删除. D盾界面是这样的. 手动一个个找WEBSHELL并且改名效率太低 ...

  6. 【API】开机自启动- ActiveX启动

    一 学习目标 这是一段远程控制木马开机启动的代码,主要使用了ActiveX方式启动.结合自己的理解重新整理了笔记.而作为编程新手入门的自己决定要开始梳理学习目的和订下学习的目标.从今天开始要坚持做到 ...

  7. 关于出现Not an editor command: Bundle '**/*.vim'的解决方案【转】

    转自:https://blog.csdn.net/YHM07/article/details/49717933 操作系统: $ uname -r 2.6.32-573.7.1.el6.x86_64 $ ...

  8. 【sky第二期--PID算法】--【智能车论坛】

    [sky第二期--PID算法] 想学PID的可以来[智能车论坛]这里有我发布的资料http://bbs.tekbots.eefocus.com/forum.php?mod=viewthread& ...

  9. win10安装virtualBox创建CentOS6.5虚拟机

    1.安装virtualBox 1.1.下载安装包,安装 搜索一下,或者去 VirtualBox官网下载一个. 下载第一个,兼容64,32位. 2.创建64位虚拟机 2.1.解决无法创建64位的问题 2 ...

  10. mysql的日志及利用mysqldump备份及还原

    日志文件:6类       一般查询日志:log,general_log,log_output       慢查询日志:       错误日志       二进制日志       中继日志       ...