CSS

Question

I have a setup similar to:

<body>
    <div class="non-moving-header">
    </div>
    <div class="floating-header">
    </div>
    <div>
        Some vertically expanding content...
    </div>
</body>

with

body, html
{
    height: 100%;
    min-height: 100%;
}

.floating-header
{
    z-index: 9999;
    top: 0;
    position: sticky;
}

The issue is that the sticky element works fine, until it reaches the position of the original bottom of the viewport, where it stops as if it had reached the end of its parent element. If I manually set the body/html height property to something like 1500 it tracks as expected all of the way down the document. Is there a way to get position:sticky to properly track to an auto-sizing parent element?

Jonathan Beaty · Accepted Answer

enter image description here

You need to add overflow: scroll to your CSS for your full page wrapper/container div, then your targeted sticky element should scroll the full length of your web page and not get stuck when you exit your original view port.

CSS - position: sticky stops at the bottom of the original screen height

Tags:

html

Matthew Heimlich

1 Answers

Jonathan Beaty

Recent Activity

Donate For Us