position-sticky-fixed-ancestor-ref.html (1132B)
1 <!DOCTYPE html> 2 <title>Reference for sticky elements inside fixed ancestors shouldn't account for scroll</title> 3 <style> 4 body,html { 5 margin: 0; 6 width: 100%; 7 height: 100%; 8 } 9 10 .sticky { 11 background: green; 12 width: 100px; 13 height: 10%; 14 } 15 16 .spacer { 17 height: calc(25vh - 10%); 18 } 19 .long { 20 height: 600vh; 21 } 22 23 .position-parent { 24 position: absolute; 25 display: flex; 26 align-items: center; 27 justify-content: center; 28 width: 100%; 29 height: 100%; 30 top: 100vh; 31 background-color: lightgrey; 32 } 33 34 .container { 35 width: 100px; 36 height: 100%; 37 background-color: grey; 38 } 39 40 button { 41 position: fixed; 42 left: 20px; 43 top: 20px; 44 } 45 46 .fixed { 47 position: fixed; 48 top: 25vh; 49 } 50 </style> 51 52 <div>You should see a green box below. No blue should be visible.</div> 53 <div class="position-parent fixed"> 54 <div class="container"> 55 <div class="spacer"></div> 56 <div class="sticky"></div> 57 </div> 58 </div> 59 <div class="long"></div> 60 <button id="button">Toggle Fixed</button> 61 62 <script> 63 window.scrollTo(0, document.querySelector('.long').clientHeight); 64 </script>