Skip to content

Commit 5b90519

Browse files
tuankiet65tuankiet65
committed
1 parent e8c6cbf commit 5b90519

2 files changed

Lines changed: 130 additions & 0 deletions

File tree

‎css/css-anchor-position/anchor-scroll-to-sticky-005-ref.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html class='reftest-wait'>
3+
<title>Reference: Fixed box anchors to sticky child while scrolling</title>
4+
<link rel="author" title="Elika J. Etemad" href="https://fantasai.inkedblade.net/contact">
5+
6+
<style>
7+
#sticky {
8+
background: teal;
9+
border: 10px solid aqua;
10+
color: white;
11+
anchor-name: --sticky;
12+
}
13+
14+
#child {
15+
anchor-name: --sticky-child;
16+
background: blue;
17+
border: 5px solid navy;
18+
margin-inline: 25%;
19+
}
20+
21+
.anchored {
22+
position: absolute;
23+
background: fuchsia;
24+
padding: 4px;
25+
}
26+
.anchored.positionArea {
27+
position-area: bottom span-right;
28+
}
29+
.anchored.anchorFunction {
30+
top: anchor(outside);
31+
right: anchor(inside);
32+
}
33+
34+
.anchored.sticky {
35+
position-anchor: --sticky;
36+
}
37+
.anchored.sticky-child {
38+
position-anchor: --sticky-child;
39+
}
40+
41+
:root {
42+
padding: 40px;
43+
block-size: 200%;
44+
}
45+
body {
46+
border: 2px dashed;
47+
height: 100%;
48+
}
49+
</style>
50+
51+
<div style="position: fixed; top: 0; width: calc(100% - 100px); height: 100vh">
52+
<div id="sticky">Sticky
53+
<div id="child">Sticky Child</div>
54+
</div>
55+
<div class="anchored sticky positionArea">Anchored to Sticky</div>
56+
<div class="anchored sticky-child positionArea">Anchored to Child</div>
57+
<div class="anchored sticky anchorFunction">Anchored to Sticky</div>
58+
<div class="anchored sticky-child anchorFunction">Anchored to Child</div>
59+
</div>
60+
61+
<script>
62+
window.scrollBy(0, 100);
63+
document.documentElement.removeAttribute('class');
64+
</script>

‎css/css-anchor-position/anchor-scroll-to-sticky-005.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html class='reftest-wait'>
3+
<title>Test: Fixed box anchors to sticky child while scrolling</title>
4+
<link rel="author" title="Elika J. Etemad" href="https://fantasai.inkedblade.net/contact">
5+
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
6+
<link rel="match" href="anchor-scroll-to-sticky-005-ref.html">
7+
8+
<style>
9+
#sticky {
10+
position: sticky;
11+
inset-block-start: 0;
12+
background: teal;
13+
border: 10px solid aqua;
14+
color: white;
15+
anchor-name: --sticky;
16+
}
17+
18+
#child {
19+
anchor-name: --sticky-child;
20+
background: blue;
21+
border: 5px solid navy;
22+
margin-inline: 25%;
23+
}
24+
25+
.anchored {
26+
position: absolute;
27+
background: fuchsia;
28+
padding: 4px;
29+
}
30+
.anchored.positionArea {
31+
position-area: bottom span-right;
32+
}
33+
.anchored.anchorFunction {
34+
top: anchor(outside);
35+
right: anchor(inside);
36+
}
37+
38+
.anchored.sticky {
39+
position-anchor: --sticky;
40+
}
41+
.anchored.sticky-child {
42+
position-anchor: --sticky-child;
43+
}
44+
45+
:root {
46+
padding: 40px;
47+
block-size: 200%;
48+
}
49+
body {
50+
border: 2px dashed;
51+
height: 100%;
52+
}
53+
</style>
54+
55+
<div id="sticky">Sticky
56+
<div id="child">Sticky Child</div>
57+
</div>
58+
<div class="anchored sticky positionArea">Anchored to Sticky</div>
59+
<div class="anchored sticky-child positionArea">Anchored to Child</div>
60+
<div class="anchored sticky anchorFunction">Anchored to Sticky</div>
61+
<div class="anchored sticky-child anchorFunction">Anchored to Child</div>
62+
63+
<script>
64+
window.scrollBy(0, 100);
65+
document.documentElement.removeAttribute('class');
66+
</script>

0 commit comments

Comments
 (0)