Question

我有一个包含两个元素的页面，分别是页眉和页脚。

html,
body,
main {
  width: 100%;
  height: 100%;
  background: #888;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 20%;
  background: rgba(0, 255, 0, .1);
}

footer {
  width: 10000px;
  height: 80%;
  background: rgba(255, 0, 0, .1);
}

<main>
  <header></header>
  <footer></footer>
</main>

请查看此codepen以获取实时示例。

当我水平滚动窗口时，我需要标题始终位于屏幕中间。

我不能使用position: fixed，因为我需要此元素出现在页面流中。

position: sticky完全可以满足我的需求，但是很遗憾，我无法使用它，因为父元素的宽度与视口的宽度相同。如果将父级宽度设置为大于视口本身的宽度，则可以实现所需的效果，但是我希望有一个更好的解决方案。

我希望只使用CSS解决方案，但可以使用JS解决方案。

到目前为止，我尝试过的许多事情之一是侦听滚动事件，并在元素的左边添加一个等于window.scrollX的空白，其想法是它将固定在文本的左边缘。窗口。但是，这实际上不起作用，我不确定为什么。

在该示例中，如果您尝试在标题中设置position: sticky; left: 0;，然后将width: 10000px;设置为主元素，则会看到我想要的布局。

是否可以实现相同的布局，而不必设置宽度？

Answer 1

页脚是否需要硬编码的width？这似乎是您遇到最多问题的地方。如果您仅在页脚中有需要显示的内容，并且内容可能比页眉宽，那么我建议您使用如下解决方案：

html, body, main {
  width: 100%;
  height: 100%;
  background: #888;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 20%;
  background: rgba(0,255,0,.1);
}

footer {
  display: flex;
  overflow-x: scroll;
  height: 80%;
  background: rgba(255,0,0,.1);
}

h1 {
margin-left: 70px;
}

<main>
  <header>Header</header>
  <footer>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
  </footer>
</main>

Answer 2

将标头css更改为此

header {
  width: 100%;
  height: 20%;
  background: rgba(0,255,0,.1);
  position: fixed;
  float-left: auto;
  float-right: auto;
}

Fixed元素相对于html文档而不是父容器，并且不受滚动影响。 Float left and right auto将其放在页面中心。

如果您想让footer在垂直滚动上方越过header，则应使用z-index属性。

footer {
  width: 10000px;
  height: 80%;
  background: rgba(255,0,0,.1);
  position: fixed;
  z-index: 1
}

此外，您可以在fixed和absolute之间进行选择，与fixed相比，绝对是相对于父容器的。

Answer 3

您编写的可处理标头的marginLeft值的javascript函数的解决方案是正确的。
我不知道为什么它对您不起作用，因为您没有向我们展示您的JS代码，但这是实现该目标的一种方法：

LIVE DEMO

<script>
  window.addEventListener("scroll", function () {
    var doc = document.documentElement;
    var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
    document.getElementById("myheader").style.marginLeft = left.toString() + "px";
  }, false);
</script>

如何将元素锚定到窗口的左侧

3 个答案: