How to let a fixed “sticky” div stay outside the viewport
-
28-10-2019 - |
Pergunta
I'm trying to follow this tutorial: http://jqueryfordesigners.com/fixed-floating-elements/.
The problem is that whenever the fixed positioning is applied to the div, if the browser width gets changed the div moves horizontally to fit inside the viewport. In the tutorial example http://static.jqueryfordesigners.com/demo/fixedfloat.html this does not happen.
This is my code (everything is inside a relative-positioned #wrapper):
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;
}
}
});
You can see my page here: http://www.brandcoffee.it/test/brandapart/imagick.php
Solução
I think removing right : 0;
in #target
should do.
Outras dicas
Try with providing the width
attribute in ratio
(or percent) rather than fixed pixel values.
such as :
width:25%; //for #target, and
float:right; //make target float right
width:75%; // for other contents on left side
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow