实现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>


 

div 固定宽度,固定位置不变

想写一个demo,想固定div在某个位置,改变浏览器宽度的大小不会移动   usually function 不会根据浏览器窗口大小变化 ...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:28
  • 2059

div位置大小不随浏览器变化而变化

#main-content {                 margin: 0 30px 0 260px;                 padding: 40px 0 0 0;     ...
  • MissMiss55
  • MissMiss55
  • 2013年03月13日 16:41
  • 2518

浏览器窗口小化时div相对位置不变

无论浏览器的窗口怎么变化,div的相对位置不变,position:relative;父div定义这个,然后再去用绝对定位跟相对定位,子div就是跟着父div的左上角了,如果不事先定义的话,那绝对定位跟...
  • Jonia917
  • Jonia917
  • 2014年04月02日 16:55
  • 1901

CSS+jquery 实现滑动下拉框 DIV相对于浏览器固定位置

Html代码   >    html>      head>          title>Anchor Propertiestitle>          meta http-equiv=...
  • qiufengwuxiu
  • qiufengwuxiu
  • 2018年01月31日 14:33
  • 11

CSS实现相对浏览器窗口定位

Web Developer / Designer 经常需要将一个元素“固定”在页面的某个位置。例如弹出窗口、漂浮广告位等……本文将详细介绍简单CSS实现元素相对于浏览器窗口进行定位的方法。 po...
  • huangdehui1989
  • huangdehui1989
  • 2014年03月08日 00:30
  • 3199

Jquery DIV滚动至浏览器顶部位置固定

获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative。 方法一: $(func...
  • alex8046
  • alex8046
  • 2016年09月28日 15:49
  • 2109

Study Html《如何让DIV固定在页面的某个位置而不随着滚动条随意滚动》

利用JavaScript脚本,从浏览器中获取各个关于位置的参数,然后将其计算后,定位在窗体的右下角。可以承认,这个方法确实是比较自然的想法,也是很常见的方法,但是这样的方法有以下几个缺点: 1、...
  • jiangdragon
  • jiangdragon
  • 2015年01月29日 13:55
  • 6102

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

$(document).ready(function () { var stayBottom = function () { ///相对于浏览器的位置(浏览器的高度+滚动到上面看不到的高度-本身的高度...
  • pukuimin1226
  • pukuimin1226
  • 2012年06月24日 14:30
  • 6574

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

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

上下Div固定,中间div高度自适应(随浏览器高度变化而变化)

1.css代码: html,body{ margin:0; padding:0; height:100%; overflow:hidden; } #top{ position:absol...
  • muyeju
  • muyeju
  • 2015年10月03日 15:56
  • 5277
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现DIV相对于浏览器固定位置不变
举报原因:
原因补充:

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