anchor-scroll-to-sticky-003.html (916B)
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-003-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 scrollbar-width: none; 19 } 20 21 #anchor { 22 anchor-name: --a1; 23 position: sticky; 24 top: 0; 25 height: 20px; 26 background: orange; 27 } 28 29 #anchored { 30 position: absolute; 31 position-anchor: --a1; 32 left: anchor(left); 33 top: anchor(bottom); 34 background: green; 35 } 36 37 </style> 38 39 <!-- Anchored to later sticky-positioned. --> 40 <div id="anchored"></div> 41 <div id="scroller"> 42 <div style="height: 50px"></div> 43 <div id="anchor"></div> 44 <div style="height: 300px"></div> 45 </div> 46 47 <script> 48 scroller.scrollTop = 200; 49 </script>