<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>scrollTop</title>
<style>
#div1{width: 200px;height: 150px;background: red;position: absolute;right: 0;bottom: 0;}
body{height: 2000px;}
</style>
</head>
<body>
<div id="div1"></div>
<script>
//clientHight 可视区高度
//offsetHight 物体的高度

//IE FF
//alert(document.documentElement.scrollTop);

//chrome
//alert(document.body.scrollTop)

//IE6下的固定定位是不可行的 fixed不可用 scrollTop+clientHight-offsetHight(能够把div固定在可视区下方)

window.onscroll = window.onresize = function(){
var oDiv = document.getElementById("div1");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条的垂直位置

oDiv.style.top = document.documentElement.clientHeight-oDiv.offsetHeight + scrollTop + "px";

}

</script>
</body>
</html>

scrollTop实例的更多相关文章

  1. 深度理解Jquery 中 scrollTop() 方法

    这是工作遇到scrollTop() 方法.为了强化自己,把它记录在博客园当中. 下面就开始scrollTop 用法讲解: scrollTop() 定义和用法 scrollTop() 方法设置或返回被选 ...

  2. 最近学习工作流 推荐一个activiti 的教程文档

    全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...

  3. scrollTop实现图像循环滚动（实例1）

    <html><head><title>scrollTop实现图像循环滚动(实例1)</title><meta http-equiv="C ...

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

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

  5. jQuery中animate与scrollTop、offset().top实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义 及 计算方式 附实例说明

    一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight ...

  7. 十分钟玩转 jQuery、实例大全

    一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产 ...

  8. jquery简介和实例

    一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. 参考:http://www.php100 ...

  9. python: DOM 小实例

    一.全选 全部取消  反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...

随机推荐

  1. 论文解读（GMIM）《Deep Graph Clustering via Mutual Information Maximization and Mixture Model》

    论文信息 论文标题:Deep Graph Clustering via Mutual Information Maximization and Mixture Model论文作者:Maedeh Ahm ...

  2. 组织：SAE

    美国汽车工程师学会(SocietyofAutomotiveEngineers),美国及世界汽车工业(包括航空和海洋)有重要影响的学术团体.简称SAE.已有90余年的历史.该学会实行会员制,约有会员69 ...

  3. 找到占用CPU最高的Java线程

    一.找到java进程id jps查看当前运行的java进程id [root@localhost ~]# jps 18354 Jps 9381 Bootstrap 二.找到内存和CPU占用最高的线程pi ...

  4. Java高并发-无锁

    一.无锁类的原理 1.1 CAS CAS算法的过程是这样:它包含3个参数CAS(V,E,N).V表示要更新的变量,E表示预期值,N表示新值.仅当V值等于E值时,才会将V的值设为N,如果V值和E值不同, ...

  5. WTF表单验证

    WTF表单验证可分为3个步骤: ①导入wtf扩展提供的表单验证器.(from wtforms.validators import DataRequired,EqualTo) ②定义表单类 # 定义表单 ...

  6. 在 Git 提交信息中使用 Emoji

    Gitmoji 旨在解释如何在 Git 提交消息时使用表情符号.在提交信息时使用表情符号,可以更容易地识别提交的目的或意图. Emoji 列表 :优化项目结构 / 代码格式 :art: ️ :性能提升 ...

  7. 大白话讲Java的锁

    偏向锁 对一个对象的锁偏向于某个线程,在markword中记录线程id 下次相同的线程来,直接就可以获取锁 轻量级锁 对象的Markword记录锁地址 跟线程栈里面的锁记录Lock Record的锁地 ...

  8. CF 1015F

    题意:[CF 1015F](https://codeforces.com/contest/1015/problem/F) 给你一个模式串A(一个不一定合法的括号序列),让你构造长度为2*n的合法括号序 ...

  9. 《HALCON数字图像处理》第三章笔记

    目录 第三章 HALCON图像处理基础 HALCON控制语句 HALCON算子 HALCON图像处理入门 HALCON图像读取 HALCON图像显示 图形窗口 图像显示 显示文字 HALCON图像转换 ...

  10. C语言学习之我见-strncpy()字符串复制函数（可控制范围）

    strncpy()函数,用于两个字符串值的复制. (1)函数原型 char *strncpy(char * _Dest,const char * _Source,size_t _Count); (2) ...