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

Question

I have a page with two elements, a header and a footer.

 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> 

Please check this codepen for a live example.

---

When I scroll the window horizontally, I need the header to always be centered in the middle of the screen.

I can't use position: fixed because I need this element to be in the page flow.

position: sticky does exactly what I need, but unfortunately I can't use it because the parent element's width is the same as the viewport width. If I set the parent width to a width that is bigger than the viewport itself, I achieve what I want, but I'm hoping for a better solution.

I'd prefer a CSS-only solution but I'm open to a JS solution.

---

One of the many things I've tried so far is listening for the scroll event and adding a margin left to the element equal to window.scrollX , the idea being that it would stay anchored to the left edge of the window. However that doesn't actually work, I'm not sure why.

In the example, if you try to set position: sticky; left: 0; position: sticky; left: 0; in the header, then give a width: 10000px; to the main element, you'll see my desired layout.

Is it possible to achieve this same layout, but without having to set a width?

Answer 1

Does the footer need to have a hardcoded width ? That seems to be where you'll have the most issues. If you simply have content in the footer that needs to be displayed and may be wider than the header, then I would recommend utilizing a solution like the following:

 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

Change the header css to this

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

Fixed elements are relative to the html document and not the parent container, and aren't affected by scrolling. Float left and right auto center it on the page.

If you want the footer to go over the header on vertical scroll you should use z-index property.

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

Also you can fiddle between fixed and absolute absolute is relative to the parent container unlike fixed

Answer 3

Your solution of writing javascript function that will handle the marginLeft value of the header was correct.
I dont know why it did not work for you because you did not showed us your JS code, but here one way to achieve that:

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>