实现DIV相对于浏览器固定位置不变

原创 2013年12月04日 10:03:25

 

 

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

<html>
	<head>
		<title>Anchor Properties</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta content="noindex, nofollow" name="robots">
		<script>
function top(){
	window.scrollTo(0,0);
}		
		
function bottom(){
	//scrollHeight属性是获取对象的滚动高度。
	window.scrollTo(0,document.body.scrollHeight);
}

function left(){	
	//alert("left");alert(document.body.scrollLeft)
	var left = 0-document.body.scrollWidth;//向左移动的像素
	window.scrollBy(left,0 );
}

function right(){
	//alert(document.body.scrollWidth);
	//整个滚动条的宽度
	window.scrollBy(document.body.scrollWidth,0);
}		

function init(){
	var init_pos=oLayer.style.posTop ;
	var init_left=oLayer.style.posLeft;
	
	document.body.onscroll=function(){ 
	//document.body.scrollTop等于滚动滑块上端离滚动的开始点的距离
		oLayer.style.posTop=document.body.scrollTop+init_pos;
	//scrollLeft设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
		oLayer.style.posLeft=document.body.scrollLeft +init_left;
	}
}		
		
		
		</script>
	</head>
	<body onload="init()">
	<a onclick="bottom()">置底</a>
	<div id="oLayer" style="position:absolute;left:120;top:60;z-index:2;background:green;width:120px;height:120px"> ddddd
</div> 

	<br>
	<a onclick="right()">置&nbsp;右</a>
	<div style="width:1500px;height:30px;float:left">width="2000px"</div>
	<a style="float:right" onclick="left()">置&nbsp;左</a>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a onclick="top()">置&nbsp;顶</a>
	</body>
</html>


 

position属性absolute与relative 详解 不为人知的(fixed)绝对定位(fixed相对于浏览器窗口=不动的div)

From:http://www.cnblogs.com/wiseblog/articles/4352007.html 总结: 当一个标签打上position:absolute绝对标签后,当我们...
  • henrypt
  • henrypt
  • 2016年12月02日 10:39
  • 1934

Jquery实现相对浏览器位置固定、悬浮

$(document).ready(function () { var stayBottom = function () { ///相对于浏览器的位置(浏览器的高度+滚动到上面看不到的高度-本身的高度...

实现qq聊天界面设计 完美解决edittext 软键盘弹出时listview背景不被挤压+listview Item和edittext的相对位置不变

最近在写一个聊天窗口,要实现软键盘弹出时listview背景不被挤压,并且弹出时Item和edittext的相对位置不变,困扰了好几天,查了很多资料,发现都没有这方面的完整内容,顾在此记录一下。与大家...

div+css如何让页面随着窗口的变化内容位置不变

前端关于div内容随着浏览缩放如何不改变其位置,不改变元素内容的相对位置,使其如浏览器正常般呈现 在我们眼前...

JS+JQuery实现任意意嵌套的IFrame里鼠标相对于浏览器窗体坐标

iframe用过的都人都知道,iframe是一个事件无法向上级冒泡二期交互并不是那么方便的一个html元素,但是时至今日他独特的功能还是会出现在不少开发中,有时我们需要获取任何一个不定的iframe中...

div浮层,滚动条移动,保持位置不变的4种方法

div在顶部不变、滚动条滚动,div还是在顶部! 直接上传源码 了: 方法一: [html] view plaincopyprint? >      html x...

调整数组 使得数组中负数排在前面正数排在后面,并且正数和负数的相对位置不变 (递归思路)

假设一整型数组存在若干正数和负数,现在通过某种算法使得该数组的所有负数在正数的左边,且保证负数和正数间元素相对位置不变。时空复杂度要求分别为:o(n)和o(1) 解题思路: 假设X代表正数...

[面试算法]把一个字符串的大写字母放到字符串的后面,各个字符的相对位置不变,不能申请额外的空间。

//把一个字符串的大写字母放到字符串的后面,各个字符的相对位置不变,不能申请额外的空间。 void MoveSupperToEndWithOrginOrder( char* szSrc , int n...
  • claien
  • claien
  • 2013年11月27日 16:50
  • 3151

图片和文字保持相对位置不变以及background属性

这个代码大神分分钟写完。先来看效果图: 下面是代码: aa *{padding:0;margin:0;} ul,li{list-style:none;} .wrap { wid...
  • DHASA
  • DHASA
  • 2016年03月02日 19:43
  • 1154

剑指offer-----使数组中所有奇数在前,所有偶数在后,并保持相对位置不变

题目:输入一个整数数组,实现一个函数调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数的相对位置不变。 思路:这个题的解法有好多种,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现DIV相对于浏览器固定位置不变
举报原因:
原因补充:

(最多只允许输入30个字)