OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <style> | |
3 .box { | |
4 position: sticky; | |
5 } | |
6 | |
7 .without-top { | |
8 top: auto; | |
9 } | |
10 | |
11 .with-top { | |
12 top: 0px; | |
13 } | |
14 | |
15 .with-bottom { | |
16 bottom: 0px; | |
17 } | |
18 | |
19 </style> | |
20 | |
21 <body> | |
flackr
2017/05/09 21:21:41
nit: I think the body tag is not usually included
yigu
2017/05/09 21:35:20
Done.
| |
22 <div class="box without-top">Sticky, no top</div> | |
23 <div class="box with-top">Sticky, with top</div> | |
24 <div class="box with-bottom">Sticky, with bottom</div> | |
25 </body> | |
26 | |
27 <!-- top should be auto when not specified for sticky elements. Same for the | |
28 other attributes.--> | |
29 <script> | |
30 if (window.testRunner) | |
31 testRunner.dumpAsText(); | |
32 | |
33 function doTest() { | |
34 var boxes = document.getElementsByClassName('box'); | |
35 for (var i = 0; i < boxes.length; ++i) { | |
36 boxes[i].textContent += ': top = ' + getComputedStyle(boxes[i]).top; | |
37 boxes[i].textContent += '; bottom = ' + getComputedStyle(boxes[i]).bottom; | |
38 boxes[i].textContent += '; left = ' + getComputedStyle(boxes[i]).left; | |
39 boxes[i].textContent += '; right = ' + getComputedStyle(boxes[i]).right; | |
40 } | |
41 } | |
42 | |
43 window.addEventListener('load', doTest, false); | |
44 </script> | |
OLD | NEW |