position-sticky-in-checkerboard-land-1.html (703B)
1 <!DOCTYPE html> 2 <html reftest-async-scroll 3 reftest-displayport-x="0" reftest-displayport-y="0" 4 reftest-displayport-w="800" reftest-displayport-h="2000" 5 reftest-async-scroll-x="0" reftest-async-scroll-y="2500"> 6 7 <title>position:sticky item that's still visible while the rest of the scrollframe contents are checkerboarded</title> 8 9 <style> 10 html { 11 scrollbar-width: none; 12 } 13 14 body { 15 margin: 0; 16 height: 4000px; 17 } 18 19 #sticky_container { 20 margin-top: 100px; 21 height: 3000px; 22 background-image: linear-gradient(green, blue); 23 } 24 25 #sticky { 26 position: sticky; 27 top: 0; 28 height: 100px; 29 background-color: green; 30 } 31 32 </style> 33 34 <div id="sticky_container"> 35 <div id="sticky"></div> 36 </div>