To implement sticky header or footer, the key is to use position: sticky correctly. When implementing sticky header, you need to set position: sticky and top: 0, and make sure that the parent container does not set overflow: hidden. It is recommended to add z-index to prevent overwriting; 1. The sticky header does not detach from the document flow, and is fixed when scrolling to the top, and does not affect the layout of other content; 2. To implement sticky footer, you need to wrap the main content and set footer's position: sticky and bottom: 0, but it only takes effect when the content is less than one screen; 3. When using sticky, you need to note that the parent element cannot have overflow: hidden/scroll/auto, top or bottom must be specified, and the use of transform/filter/will-change and other attributes, and the height of the sticky element cannot exceed the included block. sticky is a practical but restrictive property, and is applicable to the fixed positioning that depends on the scrolling context.

It is actually not difficult to make sticky header or footer, the key is to use position: sticky well. It doesn't get out of the document stream like fixed, but is between relative and fixed and can be "sticked" on the screen according to the scroll position. But to use it correctly, there are several details that must be paid attention to.

Basic writing of Sticky Header

Want to have the header fixed on the top? Just set position: sticky for the header and add top: 0 . This way the browser knows: when the element scrolls to the top, fix it.

 header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

A few points to note:

• The parent container cannot be overflow: hidden , otherwise sticky will not take effect.
• It is best to add a z-index to prevent it from being covered by other content.
• It does not occupy space and disappear, which is different from fixed.

For example, you have a navigation bar with a banner picture on it. Sticky header will naturally overwrite the banner after scrolling up, but other contents of the page continue to scroll.

How to implement Sticky Footer

Footer is a little bit troublesome to sticky at the bottom, because most of the time we want it to be displayed at the end of the content by default, and only stick to the bottom of the screen if the content is not high enough. This requires a little structural coordination.

A common practice is to use a wrapper container to wrap the main content and set footer to sticky:

 <div class="wrapper">
  <main>page content</main>
  <footer class="sticky-footer">This is the bottom</footer>
</div>

CSS:

 .sticky-footer {
  position: sticky;
  bottom: 0;
  background: white;
}

However, this method is only suitable for situations where the content height is less than one screen. If the content is very long, footer will still scroll out normally. If you want footer to always be at the bottom of the viewport (similar to fixed), you still have to use position: fixed .

Frequently Asked Questions and Notes

When using sticky, some pits are easy to step on. Here are a few common ones:

• The parent element has set overflow: hidden/scroll/auto → sticky invalid
• There is no top or bottom specified → The browser doesn't know where you want to stick to
• Use of transform , filter , will-change and other properties → sticky may be invalid
• The height of the sticky element cannot exceed the height of its containing block → otherwise it may not stick

So remember to check these places after writing. Sometimes I clearly wrote sticky but didn’t respond, most of the reasons.

Basically that's it. sticky is a very practical property, just remember that it relies on the scrolling context, not all cases apply. If you master these points well, it will not be difficult to do sticky header or footer.

The above is the detailed content of How to create a sticky header or footer using css position sticky. For more information, please follow other related articles on the PHP Chinese website!