scrollTop实例
<!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实例的更多相关文章
- 深度理解Jquery 中 scrollTop() 方法
这是工作遇到scrollTop() 方法.为了强化自己,把它记录在博客园当中. 下面就开始scrollTop 用法讲解: scrollTop() 定义和用法 scrollTop() 方法设置或返回被选 ...
- 最近学习工作流 推荐一个activiti 的教程文档
全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...
- scrollTop实现图像循环滚动（实例1）
<html><head><title>scrollTop实现图像循环滚动(实例1)</title><meta http-equiv="C ...
- jQuery动画效果animate和scrollTop结合使用实例
CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color ...
- jQuery中animate与scrollTop、offset().top实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义 及 计算方式 附实例说明
一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight ...
- 十分钟玩转 jQuery、实例大全
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产 ...
- jquery简介和实例
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. 参考:http://www.php100 ...
- python: DOM 小实例
一.全选 全部取消 反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...
随机推荐
- ThreadLocal夺命11连问
前言 前一段时间,有同事使用ThreadLocal踩坑了,正好引起了我的兴趣. 所以近期,我抽空把ThreadLocal的源码再研究了一下,越看越有意思,发现里面的东西还真不少. 我把精华浓缩了一下, ...
- 力扣算法JS LC 59-螺旋矩阵2，LC 152-乘积最大子数组
LC 59-螺旋矩阵2 给你一个正整数 n ,生成一个包含 1 到 n2 所有元素,且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix . 示例 1: 输入:n = 3输出:[[1,2 ...
- 好客租房16-jsx中的列表渲染
如果要渲染一组数组 应该使用数组的map方法 注意:渲染列表时候添加key属性 key属性的值要保持唯一 原则:map()遍历谁 就给谁添加key属性 尽量避免索引号作为key //导入react i ...
- MySql笔记Ⅱ
MySql笔记2: part3:(table相关的操作) 数据的增删改 create table t1( id int primary key auto_increment, username cha ...
- POJ1821 Fence 题解报告
传送门 1 题目描述 A team of $k (1 <= K <= 100) $workers should paint a fence which contains \(N (1 &l ...
- Java注释、标识符、关键字
Java注释.标识符.关键字 注释 单行注释以"//" 开始:多行注释以 "/*" 开始,以"*/"结束:文档注释以 "/**&q ...
- （数据科学学习手札138）使用sklearnex大幅加速scikit-learn运算
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,scikit-learn作为经 ...
- vivo 容器集群监控系统架构与实践
vivo 互联网服务器团队-YuanPeng 一.概述 从容器技术的推广以及 Kubernetes成为容器调度管理领域的事实标准开始,云原生的理念和技术架构体系逐渐在生产环境中得到了越来越广泛的应用实 ...
- SAP Web Dynpro-版本管理
您可以使用版本管理来管理对象的旧版本,比较版本,也可以重置它们. 在版本管理中,您可以存储ABAP开发对象的不同版本. 在ABAP工作台中,您可以比较不同版本的- 视图 视窗 控制器 您也可以存储对象 ...
- Android multiple back stacks导航的几种实现
Android multiple back stacks导航 谈谈android中多栈导航的几种实现. 什么是multiple stacks 当用户在app里切换页面时, 会需要向后回退到上一个页面, ...