2
Привет, У меня есть базовый прототип установки страницы с плавающей корзиной в правой колонке страниц.позиция исправлена проблема
Что происходит, когда корзина попадает в верхнюю часть страницы по мере прокрутки пользователя, она применяет класс, который фиксирует свое положение в верхней части экрана, пока пользователь еще раз не прокрутит верхнюю часть экрана.
Это прекрасно работает, кроме одного вопроса:
при изменении размеров окна браузера, так что окно просмотра меньше ширины страницы и горизонтальной прокрутки справа - если вы затем прокрутите страницу вниз корзины фиксирует свое положение так, чтобы оно перекрывало правую сторону страницы!
Код, который я использую ниже, будет предлагать любые советы. Заранее спасибо!
<!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