position-sticky-hyperlink.html (858B)
1 <!DOCTYPE html> 2 <title>Sticky element with hyperlink should work</title> 3 <link rel="match" href="position-sticky-hyperlink-ref.html"> 4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos"> 5 <meta name="assert" content="This test checks that sticky hyperlink works."> 6 <meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-80"> 7 8 <style> 9 body { 10 margin: 0; 11 } 12 13 .scroller { 14 overflow: scroll; 15 width: 200px; 16 height: 200px; 17 } 18 19 .sticky { 20 position: sticky; 21 top: 0; 22 will-change: transform; 23 } 24 25 .spacer { 26 height: 700px; 27 } 28 </style> 29 30 <script> 31 window.addEventListener('load', function() { 32 document.querySelector('.scroller').scrollTop = 100; 33 }); 34 </script> 35 36 <div>You should see a sticky link at the top of the scrollable area.</div> 37 38 <div class='scroller'> 39 <a href='#' class='sticky'>Link</a> 40 <div class='spacer'></div> 41 </div>