我有一个网站,这是用WordPress制作的。我的页面上的所有内容都包装在一个div中。我现在想做的是在内容的两侧添加横幅,并在滚动时保持固定。
因此,横幅的顶部应该与顶部对齐。
左侧横幅的右侧应位于主要内容左侧的右侧。
右侧横幅的左侧应该紧挨着主要内容的左侧。
因此,我将从左到右获得所有元素: left banner -> content -> right banner。全部在顶部对齐。当我滚动页面时,只会滚动内容,而不会滚动横幅。
重要的是横幅固定在内容的边上,所以如果浏览器的宽度缩小,那么横幅的一部分就会从屏幕上消失,而不是横幅在主要内容上。
发布于 2016-12-01 22:11:03
您可以使用css。位置实际上是固定的。下面是一个fiddle示例:
.banner {
position:fixed;
width: 100px;
height: 100px;
background-color: mediumaquamarine;
top: 40px;
}
发布于 2016-12-01 22:09:26
用来修复它们
position:fixed;
为了在顶部对齐它们,我想你必须使用边距和浮点数。例如,左侧横幅:
float:left;
现在,您可以轻松地使用页边距来正确定位它们。我希望这是你的意思?
发布于 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; }
使用滚动条创建内容元素,并将横幅留在相同的位置
https://stackoverflow.com/questions/40912635
复制相似问题