JS如何取得DIV顶部与页面可视区域顶部的距离

visiongo 2008-11-24 04:09:01

JS如何取得和设置DIV顶部与页面可视区域顶部的距离

...全文

1908 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

s_liangchao1s 2008-11-24

打赏
举报

回复



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

 <head>

  <title> New Document </title>

  <script language="JavaScript">

  <!--

	function show(obj){

		var iTop = obj.offsetTop;

		while(obj = obj.offsetParent){

			iTop += obj.offsetTop

		}

		alert("距顶部"+iTop+"px")

	}

  //-->

  </script>

 </head>



 <body>

  <div id="oDiv" style="width:250px;height:250px;position:absolute;top:102px;left:300px;border:1px solid #DFDFDF">

  </div>

  <br/>

  <input type="button" value="查看" onclick="show(document.getElementById('oDiv'))">

 </body>

</html>

liuyilidan 2008-11-24

打赏
举报

回复

parseInt(document.getElementById("DIV的ID").style.top)-parseInt(document.body.scrollTop)
div的高度-滚动的高度

visiongo 2008-11-24

打赏
举报

回复

楼上能说的详细点吗？
在线等，解决立即给分。

s_liangchao1s 2008-11-24

打赏
举报

回复

offsetTop

有时候在页面的某个模块中，需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢（比如我们这个模块是向上滚动的）？ 1.克隆A一份完全一样的数据B放在原数据A的后面； 2.使用setInterval向上滚动A的父级容器； 3.当向上滚动的距离L正好的A的高度时(L==A.height())，L=0，重新开始滚动，无限循环。克隆一份数据放在后面，是为了当A向上移动时，后面有数据能填补漏出来的空白。当B移动到可视区域的顶部时，此时A刚好移出可视区域，那么此时将容器重新归0，用户是没有感知的，以为还是B中的第一条数据。然后继续向上滚动。 1. 使用CSS3来实现若要用CSS

alamode.js 社区维护的可视化库，用于模式报告请参见包含库。快速使用在“模式”报告中打开。通过将这两行添加到报表HTML的顶部，将alamode.js和alamode.css添加到报表中。 <link rel="stylesheet" href="alamode.min.css"> [removed] 为要包括的图表添加可定制的代码段，然后编辑选项以适合您的数据。 alamode.sunburstChart( { html_element: "#sunburst-div", query_name: "My Sunburst Query", title: "A chart built with alamode", event_columns: ["event_1","event_2","ev

本套课程主要通过实战的方式让您快速学会网页布局，修改网页中的文本、背景、排版布局等，使开发者可以根据自己的需求设置不同的样式风格。

一个简单技巧的集合，帮你提升 jQuery 技能。 Matt Smith 发起的一个小项目，目前已有 14 个小技巧。伯乐在线会持续跟进更新。回到顶部按钮预加载图片检查图片是否加载完毕自动修复损坏的图片 Hover 上的 Class 开关禁用 input 字段停止链接加载淡入淡出/滑动开关简单的折叠效果将两个 Div 设为相同高度在新窗口打开外部链接找到文本元素切换可视与隐藏的触发器回到顶部按钮通过使用 jQuery 中的 animate 和 scrollTop 方法，你无需插件便可创建一个简单地回到顶部动画： JavaScript // Back to t

1.需求： banner图在可视窗口内展示程度达到80%以上即触发一个事件（由于banner图是满屏宽，因此不需要考虑高度） 2.分析：判断banner图何时不在可见范围内当banner图的底部线条在可见区域下方超过20%即为不在可见范围当banner图的顶部线条在可见区域上方超过20%即为不在可见范围 3.代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

87,907

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章