我们学习一个事件 :  页面滚动效果

window.onscroll = function() { 页面滚动语句  }

谷歌浏览器 和没有声明 DTD  <DOCTYPE     > :

document.body.scrollTop;

火狐 和其他浏览器

document.documentElement.scrollTop;

ie9+  和 最新浏览器   都认识

window.pageXOffset;     pageYOffset  (scrollTop)

兼容性写法:

 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

怎么得到scrollTop的更多相关文章

  1. 在firefox浏览器下,scrollTop始终为0的问题

    firefox下,带dtd文档申明: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. offsetTop、clientTop、scrollTop、offsetTop属性

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  3. 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...

  4. javascript中的scrollTop

    含义:滚动条高度 作用:滚动加载(ajax),滚动导航固定定位,滚动弹框定位等等. 展示滚动导航和侧边栏滚动固定定位的效果:查看效果 1.chrome浏览器 document.body.scrollT ...

  5. 【转】jquery 中scrollTop在Firefox下不起作用

    原文链接:http://stackoverflow.com/questions/8149155/animate-scrolltop-not-working-in-firefox Animate scr ...

  6. [No000067]Js中获取当前页面的滚动条纵坐标位置scrollTop

    三种方法任选其一: var sTop = document.body.scrollTop+document.documentElement.scrollTop; var sTop = document ...

  7. jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color ...

  8. JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  9. 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 代码如下: <div style=" position:absolute; widt ...

  10. html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    例如:$('window').scrollTop()获取的就是当前这个页面超出窗口最上端的高度,scrollLeft与此同理 scrollHeight: 获取对象的滚动高度. scrollLeft:该 ...

随机推荐

  1. [html/js]点击标题出现下拉列表

    效果 初始 点击后 参考代码 <!DOCTYPE html> <html> <head> <title>Layer group example</ ...

  2. Javascript 5种设计风格

    1.过程式的程序设计 <script> /*Start and Stop animations using functions.*/ function startAnimation() { ...

  3. SQLServer 2016 Express 安装部署,并配置支持远程连接

    在项目中需要用到SQLServer,于是安装部署了SQLServer,部署的过程中遇到了一下问题,记录一下以便之后遇到同样问题能快速解决. 一.安装包下载 首先下载必要的安装包: 1.SQLServe ...

  4. 设置session超时的三种方式

    设置session超时的三种方式 1. 在容器中设置:如在tomcat-7\conf\web.xml中设置 Tomcat默认session超时时间为30分钟,可以根据需要修改,负数或0为不限制sess ...

  5. oracle学习篇十一:视图

    视图是存储的查询定义. 1. 创建视图的语法如下: Create [OR REPLACE] [FORCE | NOFORCE] VIEW view_name[(alias,alias,...)] AS ...

  6. rbac——界面、权限

    一.模板继承 知识点: users.html / roles.html 继承自 base.html 页面滚动时,固定 .menu { background-color: bisque; positio ...

  7. 微信小程序--阻止冒泡事件

    微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...

  8. MFCdll的两种调用方法

        有同事问我mfcdll的掉用方法,这里总结了一下.   1 lib库调用   只要VS能找到dll对应的lib和h文件,就可以开发和调试.包含lib和h文件有两个方法. 第一种方法设置路径是 ...

  9. 学习JVM虚拟机原理总结

    0x00:JAVA虚拟机的前世今生 1991年,在Sun公司工作期间,詹姆斯·高斯林和一群技术人员创建了一个名为Oak的项目,旨在开发运行于虚拟机的编程语言,允许程序多平台上运行.后来,这项工作就演变 ...

  10. 2017年Nature文章“Millions of online book co-purchases reveal partisan differences in the consumption of science”阅读笔记

    论文:      Millions of online book co-purchases reveal partisan differences in the consumption of scie ...