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

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. 适用于所有页面的基础样式base.css

    @charset "UTF-8"; /*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, ...

  2. winform代码生成器(二)

    代码下载 地址 http://pan.baidu.com/s/1nuZjyat 接着说 上文继续说,这次我们要生成主从表. 此方用到了第三方的 控件 DevExpress 的Gridview .大家可 ...

  3. [转]谷歌Chrome浏览器开发者工具教程—基础功能篇

    来源:http://www.xiazaiba.com/jiaocheng/5557.html Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英 ...

  4. Quartz使用及注意事项

    Quartz使用及注意事项 前提:目前由于公司业务决定,大量使用Quartz,每天固定的时间点执行相应的业务逻辑,,几十个时间点应该是有的,某一个时间点如果没有执行带来的问题是巨大的.Quartz的稳 ...

  5. Spring @Resource, @Autowired and @Inject 注入

    Overview I’ve been asked several times to explain the difference between injecting Spring beans with ...

  6. mysql四:数据操作

    一.介绍 MySQL数据操作: DML ======================================================== 在MySQL管理软件中,可以通过SQL语句中的 ...

  7. vue loading组件

    <!-- * * loadingGif组件--"数据请求中" * * 使用方法: * <loading-gif :show-loading="showLoad ...

  8. AJAX 学习笔记 2017_05_04

    1.使用 AJAX 修改该文本内容 <%@ page language="java" contentType="text/html; charset=UTF-8&q ...

  9. greenplum导数据

    Greenplum and Hadoop HDFS integration Step 1: Install Java on greenplum Step 2: Set JAVA and HADOOP ...

  10. MySQL登录之socket与TCP

    在一台测试服务器上部署了2个实例,一个端口是默认的3306,另一个端口是3376.MySQL的版本是5.6.35 [root@MySQL56_L1 ~]# ps -ef | grep mysql | ...