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