Question

我有一个用WordPress制作的网站。我页面上的所有内容都包含在div中。我现在想做的是在内容的两面添加横幅并在滚动时保持固定。

因此，横幅的顶部应与顶部对齐。
左侧横幅的右侧应紧邻主要内容的左侧。
右横幅的左侧应紧邻主要内容的左侧。

因此，我会从左到右得到所有元素：左横幅 - ＆gt;内容 - ＆gt;右旗帜。全部对齐在顶部。当我滚动页面时，只有内容会滚动而不是横幅。

重要的是横幅固定在内容的两侧，因此如果浏览器的宽度缩小，那么横幅的一部分将从屏幕上移出而不是横跨主要内容的横幅。

Answer 1

你可以使用css。实际位置固定。这是fiddle 例如：

 .banner {
      position:fixed;
      width: 100px;
      height: 100px;
      background-color: mediumaquamarine;
      top: 40px;
    }

Answer 2

用

修复它们

position:fixed;

为了将它们对齐在顶部，你必须使用margin和float我猜。例如左旗：

float:left;

现在，您可以轻松使用边距来正确定位它们。我希望你的意思是什么？

Answer 3

假设横幅有class="banner banner-right"或class="banner banner-left"

.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; }

使用滚动条制作内容元素，并将横幅留在同一个地方

Answer 4

您可以使用position: fixed之类的：

$group

如何在滚动时保持图像的位置固定？

4 个答案: