dynamic-toolbar-sticky-1-ref-b.html (794B)
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: relative; 14 top: calc(-50px - 20px + 10px - 50px); 15 height: 50px; 16 background-color: blue; 17 opacity: 50%; 18 } 19 .sticky_both { 20 position: relative; 21 top: calc(-100px - 20px + 10px - 50px); 22 height: 50px; 23 background-color: purple; 24 opacity: 50%; 25 } 26 .sticky_top { 27 height: 50px; 28 background-color: red; 29 opacity: 50%; 30 } 31 </style> 32 <div class="spacer"></div> 33 <div class="sticky_bottom"></div> 34 <div class="sticky_both"></div> 35 <div class="sticky_top"></div> 36 <div class="spacer"></div> 37 <script> 38 document.scrollingElement.scrollTop = 10; 39 </script>