dynamic-toolbar-sticky-6-ref-t.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 height: 50px; 14 background-color: blue; 15 opacity: 50%; 16 } 17 .sticky_both { 18 position: relative; 19 top: calc(100px + 20px - 10px + 50px); 20 height: 50px; 21 background-color: purple; 22 opacity: 50%; 23 } 24 .sticky_top { 25 position: relative; 26 top: calc(50px + 20px - 10px + 50px); 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 = 1140; 39 </script>