<!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. .Net 6 WebApi 项目部署到 Linux 系统上的 Docker 容器

    1.创建一个基础的WebApi项目 注意:因为发布时候,Dockerfile文件必须和解决方案.cspro文件放在同级,所以建议勾上这个,当时遇到这个问题,导致打包镜像时找不到.cspro文件,搞了好 ...

  2. .netcore6.0自己配置swagger

    环境:.net core6.0 一.安装依赖包:Swashbuckle.AspNetCore 二.右击项目->属性->生成->输出,勾选文档文件,然后配置文件生成路径,注意是相对路径 ...

  3. 面试官问：Go 中的参数传递是值传递还是引用传递？

    一个程序中,变量分为变量名和变量内容,变量内容的存储一般会被分配到堆和栈上.而在 Go 语言中有两种传递变量的方式值传递和引用传递.其中值传递会直接将变量内容附在变量名上传递,而引用传递会将变量内容的 ...

  4. 【多线程】观测线程状态 getState()

    观测线程状态 getState() Thread.State(查看JDK帮助文档) 线程状态.线程可以处于以下状态之一: [NEW] 尚未启动的线程处于此状态. [RUNNABLE] 在Java虚拟机 ...

  5. linux篇-linux 下建立多个tomcat

    第一步:复制,解压 将准备好的tomcat压缩包复制到你准备安装的目录,我的tomcat压缩包名字是tomcat.tar.gz,我的安 装目录是 /usr/java/tomcat 第二步:解压tomc ...

  6. goose消元

    ps.改了标题 魔板 思路:按序消除变量,用当前行(i)[行i消\(x_i\)元素],消后面的每一行的i元素 最后按逆序回代值 注意若有i~n行i元素系数都为0说明没有唯一解(其余x的解跟i元素有关) ...

  7. pandas：多层索引

    多层索引是指在行或者列轴上有两个及以上级别的索引,一般表示一个数据的几个分项. 1.创建多层索引 1.1通过分组产生多层索引 1.2由序列创建 1.3由元组创建 1.4可迭代对象的笛卡尔积 1.5将D ...

  8. 配置中心的设计-nacos vs apollo

    简介 前面我们分析了携程的 apollo(见 详解apollo的设计与使用),现在再来看看阿里的 nacos. 和 apollo 一样,nacos 也是一款配置中心,同样可以实现配置的集中管理.分环境 ...

  9. CabloyJS一站式助力微信、企业微信、钉钉开发 - 钉钉篇

    前言 现在软件开发不仅要面对前端碎片化,还要面对后端碎片化.针对前端碎片化,CabloyJS提供了pc=mobile+pad的跨端自适应方案,参见:自适应布局:pc = mobile + pad 在这 ...

  10. NodeJS全栈开发利器：CabloyJS究竟是什么

    CabloyJS CabloyJS是一款顶级NodeJS全栈业务开发框架, 基于KoaJS + EggJS + VueJS + Framework7 文档 官网 && 文档 演示 PC ...