div悬浮固定

最新推荐文章于 2024-05-13 14:29:13 发布

MoLen_Y

最新推荐文章于 2024-05-13 14:29:13 发布

阅读量3.1k

点赞数

分类专栏： HTML 文章标签： css html

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

demo传送：http://download.csdn.net/download/ymruseuse/10126975

方式一：CSS实现

<div id="erp" style="z-index: 9999; position: fixed ! important; right: 30px; top: 10px;">  
<img src="../../images/favicon.ico"  width="20" height="20"
style="position: absolute;right: 0px; top: 0px;" />  
</div>

div position参数设置为fixed 其相对于浏览器为绝对位置，通过设置right和top将div固定在右上角。

img position参数设置为absolute,其相对于第一层div绝对定位，通过设置right和top将table固定在div容器的右上角。

参考地址：http://blog.csdn.net/qq_26817251/article/details/53648685

方式二：JQ实现（引用一下jq,复制下面代码即可）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS固定定位</title>

<!--[if lte IE 6]>
<style type="text/css">
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
#fixedLayer {
position:absolute;
}
</style>
<![endif]-->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>

<body>
<!--方式一-->
<div id="fixedLayer" style="position:fixed; width:100px;line-height:50px;top:10px; left:10px;background: #fc6">固定不动</div>

<!--方式二-->
<div id="erp" style="z-index: 9999; position: fixed ! important; right: 30px; top: 10px;">  
<img src="http://www.w3school.com.cn/i/eg_cute.gif" 
style="position: absolute;right: 0px; top: 0px;" />  
</div>


<!--方式三-->
<div id="myidd" class="fixediv leftadv"
style="width:20px; z-index:20px; position:absolute; right:100px; float:right; background:#eea;">
<p>测试</p>
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
</div>

<script type="text/javascript">
$(document).ready(function(){
	$("#myidd a").click(function(){
		$("#myidd ").fadeOut(400);
	});
	$("#myidd ").floatadv();
});

jQuery.fn.floatadv = function(loaded) {
	var obj = this;
	body_height = parseInt($(window).height());
	block_height = parseInt(obj.height());
	
	top_position = parseInt((body_height/2) - (block_height/2) + $(window).scrollTop());
	if (body_height<block_height) { top_position = 0 + $(window).scrollTop(); };
	
	if(!loaded) {
		obj.css({'position': 'absolute'});
		obj.css({ 'top': top_position });
		$(window).bind('resize', function() { 
			obj.floatadv(!loaded);
		});
		$(window).bind('scroll', function() { 
			obj.floatadv(!loaded);
		});
	} else {
		obj.stop();
		obj.css({'position': 'absolute'});
		obj.animate({ 'top': top_position }, 400, 'linear');
	}
}
</script>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>

</body>
</html>