anchor-scroll-to-sticky-001.html (845B)
1 <!DOCTYPE html> 2 <title>Tests scroll adjustments of element anchored to a sticky-position element</title> 3 <link rel="author" href="mailto:wangxianzhu@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> 5 <link rel="match" href="reference/anchor-scroll-to-sticky-001-ref.html"> 6 <style> 7 body { 8 margin: 0; 9 } 10 11 div { 12 width: 100px; 13 height: 100px; 14 } 15 16 #scroller { 17 overflow: scroll; 18 } 19 20 #anchor { 21 anchor-name: --a1; 22 position: sticky; 23 top: 0; 24 height: 20px; 25 background: orange; 26 } 27 28 #anchored { 29 position: absolute; 30 position-anchor: --a1; 31 left: anchor(left); 32 top: anchor(bottom); 33 background: green; 34 } 35 36 </style> 37 38 <div id="scroller"> 39 <div style="height: 50px"></div> 40 <div id="anchor"></div> 41 <div style="height: 300px"></div> 42 </div> 43 <div id="anchored"></div> 44 45 <script> 46 scroller.scrollTop = 200; 47 </script>