layout/reftests/async-scrolling/dynamic-toolbar-sticky-1a.html

   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 = 10;
  42 </script>