Comment laisser une div «collante» fixe rester à l'extérieur de la fenêtre
-
28-10-2019 - |
Question
J'essaye de suivre ce tutoriel: http://jqueryfordesigners.com/fixed-floating-elements/.
Le problème est que chaque fois que le positionnement fixe est appliqué au div, si la largeur du navigateur est modifié, la div se déplace horizontalement pour s'adapter à la fenêtre. Dans l'exemple du tutoriel http://static.jqueryfordeigners.com/demo/fixedfloat.html Cela ne se produit pas.
Ceci est mon code (tout est à l'intérieur d'un #Wrapper positionné relatif):
CSS:
#cart {
position: absolute;
right: 0;
width: 270px;
}
#target {
width: 270px;
height: 200px;
background-color: blue;
background-position: 50% 50%;
background-repeat: no-repeat;
position: absolute;
top: 250px;
right: 0;
padding: 0;
border-radius: 15px 15px 0 0 ;
}
#drag-here {
width: 270px;
height: 0;
background-image: url(drag-here.png);
background-repeat: no-repeat;
display: none;
position: absolute;
top: 470px;
right: 0;
}
#cart-list {
display: none;
position: absolute;
top: 430px;
right: 0;
list-style-type: none;
}
.sticky #target {position: fixed; top: 5px;}
.sticky #drag-here {position: fixed; top: 225px;}
.sticky #cart-list {position: fixed; top: 185px;}
HTML:
<section id="cart">
<div id="target" class="target-listen"></div>
<div id="drag-here"></div>
<ul id="cart-list">
</ul>
</section>
JQuery:
sticky = false;
initialOffset = $("#target").offset().top - 5;
$(window).scroll(function () {
if ($(this).scrollTop() >= initialOffset) {
if (!sticky) {
$("#cart").addClass("sticky");
sticky = true;
}
}
else {
if (sticky) {
$("#cart").removeClass("sticky");
sticky = false;
}
}
});
Vous pouvez voir ma page ici: http://www.brandcoffee.it/test/brandapart/imagick.php
La solution
Je pense que retirer right : 0;
dans #target
devrait faire.
Autres conseils
Essayez de fournir le width
attribuer ratio
(ou pourcentage) plutôt que des valeurs de pixels fixes. tel que :
width:25%; //for #target, and
float:right; //make target float right
width:75%; // for other contents on left side