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