Salut, j'ai un prototype de configuration de page de base un panier flottant dans la colonne de pages droite. Ce qui se passe lorsque le panier atteint le haut de la page lorsqu'un utilisateur fait défiler applique une classe qui fixe sa position en haut de l'écran jusqu'à ce que l'utilisateur ait à nouveau défilé en haut de l'écran.position fixe numéro
Cela fonctionne bien en dehors d'une question:
lorsque vous redimensionnez la fenêtre du navigateur pour que la fenêtre est plus petite que la largeur de la page Web et défilement horizontale vers la droite - si vous puis faites défiler la page du panier fixe sa position afin qu'elle chevauche le côté droit de la page!
Le code que j'utilise est ci-dessous, apprécierait n'importe quel conseil. Merci d'avance!
<!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>
Juste pour clarifier pour tous ceux qui pourraient avoir plus d'informations. Cette question se résume à pouvoir simuler un positionnement vertical "fixe" mais un positionnement horizontal "relatif" d'un élément. – mjhm