您的位置：首页 > 其它

仿照淘宝首页做的一个高度伪对齐demo

2014-04-03 14:58 162 查看

功能就是当右边高度没有左边高的情况下做的一些处理，由于本人技术有限，不兼容所有浏览器，

<!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=utf-8" />
<title>无标题文档</title>
<style>
body { width:1000px; margin:0 auto; }
.top { height:200px; background-color:#6FF;}
.left { width:500px; float:left; background:#f4f4f4; height:3000px;}
.right { width:500px; float:right; height:1500px; background-color:#CCF; }
.rightPostion { bottom:0px; top:auto; left:50%;}
.bot { clear:both; background-color:#cc3; min-height:150px;}
.cont {
overflow: auto; position:relative;
}
</style>
</head>

<body>
<div class="top">此处显示  class "top" 的内容</div>
<div class="cont">
<div class="left" id="left">此处显示  class "left" 的内容</div>
<div class="right rightPostion" id="right">
<p>此处显示  class "right" 的内容</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>3</p>
<p> </p>
<p> </p>
<p> </p>
<p>5</p>
<p> </p>
<p> </p>
<p>ss</p>
<p> </p>
<p>d</p>
<p>s</p>
<p>d</p>
<p>s</p>
<p>笔筒圣诞节</p>
</div>
</div>
<div class="bot">此处显示  class "bot" 的内容</div>
<script>
var r= document.getElementById("right");
var l = document.getElementById("left");
document.onkeydown = keydown ;
window.onmousewheel = document.onmousewheel = wheel;
var screenH =  window.screen.availHeight;
var maxH = l.offsetHeight+200-screenH;
var positionH =  r.offsetHeight+200-screenH    ;
function wheel(){

if(document.body.scrollTop>=positionH&&document.body.scrollTop<maxH){
r.style.position = "fixed"
}
else if (document.body.scrollTop<positionH)  {r.style.position = "static" }
else {
r.style.position = "absolute"
}

}
function keydown (e){
e = e || e.event ;
var code = e.keyCode||e.which||e.charCode;
console.log(code);
if(code ==38 || code ==40){
wheel()

}
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航