2
こんにちは私はページの右側の列にフローティングバスケットの基本的なページセットアッププロトタイプを持っています。ポジション固定問題
ユーザーがスクロールしたときにバスケットがページの先頭に当たった場合、ユーザーがもう一度画面の上にスクロールするまでその位置を画面の上に固定するクラスが適用されます。
これは、1つの問題から離れて正常に動作します：ビューポートが右にWebページと横スクロールの幅よりも小さくなるように、ブラウザウィンドウのサイズを変更する場合
- あなたはそのページにバスケットをスクロールダウンしている場合その位置がページの右側に重なるように修正します！
コード私は以下を使用していますが、アドバイスをいただければ幸いです。前もって感謝します！
<!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