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 ...
随机推荐
- 以圆类 Circle 为基础设计球类 Sphere
学习内容:实验二以圆类 Circle 为基础设计球类 Sphere 代码示例: import java.util.Scanner; class Point{ private double x; pri ...
- 使用ROOT用户运行Jenkins
!本教程仅适用于以YUM.APT等包管理器安装的Jenkins. 使用ROOT用户运行Jenkins,以保证Jenkins以最高权限执行任务. 注:会存在安全风险! 1.找到Jenkins启动脚本 通 ...
- docker服务部署、迁移与备份、dockerfile、私有仓库
今日内容概要 服务部署 迁移与备份 dockerfile 私有仓库 内容详细 1.服务部署 # 装 mysql redis --->源码编译安装-->启 动 # 有了docker后,容器操 ...
- 图文详解MapReduce工作机制
job提交阶段 1.准备好待处理文本. 2.客户端submit()前,获取待处理数据的信息,然后根据参数配置,形成一个任务分配的规划. 3.客户端向Yarn请求创建MrAppMaster并提交切片等相 ...
- 30款提升组织效能 SaaS 工具,我们的宝藏工具箱大公开
熟悉 Juicedata 的小伙伴知道,从2017年成立到第一款产品发布.从寻找PMF(Product Market Fit) 到开源,我们一直保持着一个精简的团队配置,不少人都很好奇我们是如何做到的 ...
- 回流&重绘
浏览器加载解析页面:把HTML解析为DOM树,解析CSS生成CSSOM树,HTML DOM树和CSSOM树组合构建render树,首次触发回流和重绘后将页面结构信息发送给GPU进行绘制渲染. 回流:当 ...
- Java绘图基础
<零基础学Java> Java绘图基础 绘图是高级程序设计中非常重要的技术,例如,应用程序需要绘制闪屏图像.背景图像.组件外观Web程序可以绘制统计图.数据库存储的图像资源等. Graph ...
- Winforms选择文件夹、文件
更新记录: 2022年5月28日 初始记录 选择文件夹 if (this.folderBrowserDialog1.ShowDialog() == DialogResult.OK) { //获得用户选 ...
- 打字练习-编程语言关键字系列-java
小编整理的java关键字,内容如下:abstract, assert, boolean, break, byte, case, catch, char, class, const, continue, ...
- 使用http://start.spring.io/构建maven微服务项目的几个坑及eclipse构建spring boot微服务项目
一,使用http://start.spring.io/构建maven微服务项目 本来嘛,直接构建的项目导入时没有任何问题的导入就可以运行,可是最近构建好项目,然后导入,种种报错 1.导入之后POM报错 ...