dynamic-toolbar-sticky-2b.html (941B)
1 <!DOCTYPE html> 2 <html reftest-async-scroll 3 reftest-displayport-x="0" reftest-displayport-y="0" 4 reftest-displayport-w="800" reftest-displayport-h="2150" 5 reftest-async-scroll-x="0" reftest-async-scroll-y="100"> 6 <meta name="viewport" content="width=device-width"> 7 <style> 8 html, body { 9 margin: 0; 10 scrollbar-width: none; 11 } 12 .spacer { 13 height: 100vh; 14 background-color: green; 15 } 16 .sticky_bottom { 17 position: sticky; 18 bottom: 20px; 19 height: 50px; 20 background-color: blue; 21 opacity: 50%; 22 } 23 .sticky_both { 24 position: sticky; 25 top: 20px; 26 bottom: 20px; 27 height: 50px; 28 background-color: purple; 29 opacity: 50%; 30 } 31 .sticky_top { 32 position: sticky; 33 top: 20px; 34 height: 50px; 35 background-color: red; 36 opacity: 50%; 37 } 38 </style> 39 <div class="spacer"></div> 40 <div class="sticky_bottom"></div> 41 <div class="sticky_both"></div> 42 <div class="sticky_top"></div> 43 <div class="spacer"></div>