我正在尝试遵循本教程:http: //jqueryfordesigners.com/fixed-floating-elements/。
问题在于,每当将固定定位应用于 div 时,如果浏览器宽度发生更改,则 div 会水平移动以适应视口。在教程示例http://static.jqueryfordesigners.com/demo/fixedfloat.html这不会发生。
这是我的代码(一切都在相对定位的#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>
查询:
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;
}
}
});
你可以在这里看到我的页面:http ://www.brandcoffee.it/test/brandapart/imagick.php