Question

我有一个有孩子的父母div。父级是粘性的，子级是mainPicWrapper

CSS：

.mainPicWrapper {
    border:1px solid black;
    padding-left:25px;
 }

 #sticky-div.sticky {
    position: fixed;
    top: 0;
    border:0px;
 }

我有jQuery删除页面加载时的.sticky class。

然后，当它向下滚动到div的顶部时，它会将.sticky类添加回来，因此当div向下滚动时，padding-left:25px;会停留在页面顶部，哪个工作正常。

但是，如果我删除text-align:center;并将其替换为text-align:center;，那么它就无法运作。使用div时，当我滚动时，padding-left会突然向左跳回到零。

为什么div仍然适用于粘性text-align:center;，但padding没有？

这是JSFiddle演示。

img的问题是，div中实际存在padding。并且图像经常变化大小。如果你在padding时滚动，那很好，图像会滚动到正确的位置。但是使用div会导致多个大小的图像永远不会加载到chomp的中心，这就是我需要的。

Answer 1

你试过这个吗？

.mainPicWrapper {
border:1px solid black;
text-align:center;
}

#sticky-div.sticky {
position: fixed;
top: 0;
border:0px;
right:7px;
width:70%;
}
.topRightMainContainer {
border:1px;
width:70%;
position:absolute;
right:7px;
}

DEMO

固定Div与填充和文本对齐交互不同

1 个答案: