OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 | |
3 <html> | |
4 <head> | |
5 <style> | |
6 body { | |
7 margin: 0; | |
8 height: 2000px; | |
9 overflow: hidden; /* hide scrollbars */ | |
10 } | |
11 | |
12 .container { | |
13 position: absolute; | |
14 width: 200px; | |
15 height: 400px; | |
16 margin: 10px; | |
17 left: 300px; | |
18 top: -200px; | |
19 font-family: Ahem; | |
20 font-size: 24px; | |
21 outline: 2px solid black; | |
22 } | |
23 | |
24 .vertical.container { | |
25 -webkit-writing-mode: vertical-rl; | |
26 top: 300px; | |
27 left: 800px; | |
28 width: 400px; | |
29 height: 200px; | |
30 } | |
31 | |
32 .spacer { | |
33 height: 350px; | |
34 width: 20px; | |
35 background-color: black; | |
36 } | |
37 | |
38 .vertical .spacer { | |
39 height: 20px; | |
40 width: 350px; | |
41 } | |
42 | |
43 .box { | |
44 width: 150px; | |
45 height: 150px; | |
46 } | |
47 | |
48 .sticky { | |
49 position: sticky; | |
50 top: 200px; | |
51 right: 200px; | |
52 background-color: green; | |
53 opacity: 0.75; | |
54 } | |
55 </style> | |
56 <script> | |
57 function doTest() | |
58 { | |
59 window.scrollTo(100, 100); | |
60 } | |
61 window.addEventListener('load', doTest, false); | |
62 </script> | |
63 </head> | |
64 <body> | |
65 <div class="container"> | |
66 <div class="spacer"></div> | |
67 <div class="sticky box"></div> | |
68 </div> | |
69 | |
70 <div class="vertical container"> | |
71 <div class="spacer"></div> | |
72 <div class="sticky box"></div> | |
73 </div> | |
74 </body> | |
75 </html> | |
OLD | NEW |