<!DOCTYPE html> <html reftest-async-scroll reftest-displayport-x="0" reftest-displayport-y="0" reftest-displayport-w="800" reftest-displayport-h="2000" reftest-async-scroll-x="0" reftest-async-scroll-y="50"> <style> body { height: 4000px; margin: 0; overflow: hidden; } #sticky { position: sticky; top: 25px; /* scrolls regularly until the top edge hits 25px, then stays fixed */ margin-top: 50px; height: 1200px; border-bottom: 1px solid black; } #fixed { position: fixed; top: 50px; left: 50px; width: 100px; height: 100px; box-sizing: border-box; border: 1px solid blue; } </style> <div id="sticky"> <div id="fixed"></div> </div> </html>