<!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. (AAAI2020 Yao) Graph Few-shot Learning via knowledge transfer

    22-5-13 seminar上和大家分享了这篇文章 [0]Graph few-shot learning via knowledge transfer 起因是在MLNLP的公众号上看到了张初旭老师讲 ...

  2. OpenStack 安装 Keystone

    OpenStack 安装 Keystone 本篇主要记录一下 如何安装 openstack的 第一个组件 keystone 认证授权组件 openstack 版本 我选的是queens 版本 1.Op ...

  3. 好客租房54-props深入（children属性）

    children属性 表示组件标签的子节点 当组件标签有子节点是 props就会有该属性 props中的组件可以是任意属性 都是可以渲染的 //导入react     import React fro ...

  4. Oceanbase读写分离方案探索与优化

    [作者] 许金柱,携程资深DBA,专注于分布式数据库研究及运维. 台枫,携程高级DBA,主要负责MySQL和OceanBase的运维. [前言]    读写分离,是一种将数据库的查询操作和写入操作分离 ...

  5. falcon-eye-本机系统监控WebUI

    falcon-eye是一个简单的单机版基于WebUI的Linux系统监控工具. 安装falcon-eye root@localhost:~# mkdir falcon-eye root@localho ...

  6. 满满干货！手把手教你实现基于eTS的分布式计算器

    最近收到很多小伙伴反馈,想基于扩展的TS语言(eTS)进行HarmonyOS应用开发,但是不知道代码该从何处写起,从0到1的过程让新手们抓狂. 本期我们将带来"分布式计算器"的开发 ...

  7. 万字+28张图带你探秘小而美的规则引擎框架LiteFlow

    大家好,今天给大家介绍一款轻量.快速.稳定可编排的组件式规则引擎框架LiteFlow. 一.LiteFlow的介绍 LiteFlow官方网站和代码仓库地址 官方网站:https://yomahub.c ...

  8. 解决 AMD 笔记本不插电源时屏幕偏暗的问题

    办法:关掉显卡设置里的 Vari-Bright 选项 最近换了锐龙版的笔记本,用着还不错,就是不插电源时看屏幕亮度不太适应,整体偏暗,有点费眼,差点就觉得 AMD 不 Yes 了.然后网上一顿找,发现 ...

  9. 论文阅读 Dynamic Network Embedding by Modeling Triadic Closure Process

    3 Dynamic Network Embedding by Modeling Triadic Closure Process link:https://scholar.google.com.sg/s ...

  10. 第1章 C++绪论

    写于2022年5月13日: 开通博客用于学习记录分享及交流. C++复习笔记内容参考教材[双语版C++程序设计(第2版)][(爱尔兰)Paul Kelly(P. 凯利),苏小红]. 本书的网站:htt ...