2
您好我有一個基本的頁面設置原型浮動籃右頁中的列。位置固定問題
當籃子在用戶滾動時碰到頁面的頂部時會發生什麼情況，它會應用一個將其位置固定到屏幕頂部的類，直到用戶再次滾動到屏幕頂部爲止。
這工作得很好除了一個問題：
當調整瀏覽器窗口，使視比網頁和水平滾動向右的寬度 - 如果再向下滾動頁面籃筐修復其位置，使其與頁面的右側重疊！
我使用的代碼如下，將apprreciate任何意見。提前致謝！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#container{width: 900px; margin-left:auto; margin-right:auto;}
#header{height:40px; background-color:blue; }
#column1{float:left; width:600px; background-color:green; height:900px;}
#column2{float:left; width:300px; background-color:red; height:900px; position:relative;}
#basket{background-color:white; margin-left:10px; margin-right:10px; width:280px;}
.fixed{position:fixed; top:0;}
/*#scrollWrapper{overflow-y:scroll; overrflow-x:hidden; height:50px;}*/
#scrollWrapper{overflow:hidden;}
</style>
<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js" type="text/javascript"></script>
<script type="text/javascript">
YUI().use('node', function(Y){
var basket = Y.one('#basket');
var basketY = basket.getY();
var overflow = Y.one('#scrollWrapper');
function constrain()
{
var basketHeight = basket.getComputedStyle("height").split("px")[0];
var windowHeight = Y.one("body").get("winHeight");
if (basketHeight > windowHeight) {
var diff = basketHeight - windowHeight;
var scrollHeight = Y.one("#scrollWrapper").getComputedStyle("height").split("px")[0];
var newHeight = scrollHeight - diff;
overflow.setStyle("height", newHeight+"px");
}
}
Y.on('scroll', function(e){
var windowY = Y.DOM.docScrollY();
//if(windowY > basketY && !basket.hasClass("fixed"))
if(windowY > basketY)
{
basket.addClass("fixed");
var height = Y.one("body").get("winHeight");
//basket.setStyle("height", height+"px");
constrain();
}
else if(windowY < basketY && basket.hasClass("fixed")){
basket.removeClass("fixed");
alert("removing");
}
});
});
/*window.onload = function(){
var basket = document.getElementById("basket");
alert(findPos(basket));
}
function findPos(obj)
{
var curTop = 0;
if(obj.offsetParent){
do {
curTop += obj.offsetTop;
}
while (obj.offsetParent);
}
return curTop;
}*/
</script>
</head>
<body>
<div id="container">
<div id="header">
Header
</div>
<div id="column1">
</div>
<div id="column2">
<div id="basket" class="">
hkjhkjkjhkjhkj
klklkl;kl;kl
<p>jhjkhkjhkj</p>
<div id="scrollWrapper">
<ul>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
只是爲了澄清的人，可能有更多的信息。這個問題歸結爲能夠模擬「固定的」垂直定位，但是能夠模擬元件的「相對」水平定位。 – mjhm 2010-12-02 20:22:05