position-sticky-top-and-bottom.html (1451B)
1 <!DOCTYPE html> 2 <title>position:sticky elements can be constrained by top and bottom exceeding container size</title> 3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 4 <meta name="assert" content="This test checks that position:sticky elements obey both top and bottom constraints" /> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <style> 10 11 .scroller { 12 height: 200px; 13 overflow: auto; 14 position: relative; 15 } 16 .container { 17 height: 120px; 18 } 19 .padding, .sticky { 20 height: 50px; 21 } 22 .overflow-padding { 23 height: 200px; 24 } 25 .sticky { 26 position: sticky; 27 background: green; 28 top: -25px; 29 bottom: 150px; 30 } 31 </style> 32 33 <body> 34 <div class="scroller"> 35 <div class="container"> 36 <div class="padding"></div> 37 <div class="sticky"></div> 38 </div> 39 <div class="overflow-padding"></div> 40 </div> 41 </body> 42 43 <script> 44 test(() => { 45 const scroller = document.querySelector('.scroller'); 46 const element = document.querySelector('.sticky'); 47 scroller.scrollTop = 0; 48 assert_equals(element.offsetTop, 0); 49 }, 'initially the sticky box should be pushed to the top of the container'); 50 51 test(() => { 52 const scroller = document.querySelector('.scroller'); 53 const element = document.querySelector('.sticky'); 54 scroller.scrollTop = 95; 55 assert_equals(element.offsetTop, 70); 56 }, 'when we scroll past the flow position the top constraint pushes it down'); 57 </script>