如何在滚动时保持图像的位置不变？
如何在滚动时保持图像的位置不变？
提问于 2016-12-01 22:03:17
我有一个网站，这是用WordPress制作的。我的页面上的所有内容都包装在一个div中。我现在想做的是在内容的两侧添加横幅，并在滚动时保持固定。
因此，横幅的顶部应该与顶部对齐。
左侧横幅的右侧应位于主要内容左侧的右侧。
右侧横幅的左侧应该紧挨着主要内容的左侧。
因此，我将从左到右获得所有元素: left banner -> content -> right banner。全部在顶部对齐。当我滚动页面时，只会滚动内容，而不会滚动横幅。
重要的是横幅固定在内容的边上，所以如果浏览器的宽度缩小，那么横幅的一部分就会从屏幕上消失，而不是横幅在主要内容上。
回答 4
Stack Overflow用户
发布于 2016-12-01 22:11:03
您可以使用css。位置实际上是固定的。下面是一个fiddle示例：
.banner {
position:fixed;
width: 100px;
height: 100px;
background-color: mediumaquamarine;
top: 40px;
}Stack Overflow用户
发布于 2016-12-01 22:09:26
用来修复它们
position:fixed;为了在顶部对齐它们，我想你必须使用边距和浮点数。例如，左侧横幅：
float:left;现在，您可以轻松地使用页边距来正确定位它们。我希望这是你的意思？
Stack Overflow用户
发布于 2016-12-01 22:09:45
假设banners有一个class="banner banner-right"或class="banner banner-left" go
.banner {
position: fixed;
top: 0; /* or the distance from top page edge */
max-height: 100%;
}
.banner-right { right: 0; } /* or the distance from right page edge */
.banner-left { left: 0; } /* or the distance from left page edge */横幅将停留在相同的位置，即使您滚动页面！max-height的存在是为了防止横幅比窗口本身长，从而隐藏内容；
如果横幅内容太长，则可能需要添加overflow: auto;
另一种解决方案是设置
html, body { height: 100%; }
.content { max-height: 100%; overflow: auto; }使用滚动条创建内容元素，并将横幅留在相同的位置
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40912635
复制相关文章
相似问题