dynamic-toolbar-sticky-2-ref.html (700B)
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: -20px; 20 height: 50px; 21 background-color: purple; 22 opacity: 50%; 23 } 24 .sticky_top { 25 height: 50px; 26 background-color: red; 27 opacity: 50%; 28 } 29 </style> 30 <div class="spacer"></div> 31 <div class="sticky_bottom"></div> 32 <div class="sticky_both"></div> 33 <div class="sticky_top"></div> 34 <div class="spacer"></div> 35 <script> 36 document.scrollingElement.scrollTop = 100; 37 </script>