47 lines
867 B
HTML
47 lines
867 B
HTML
<html>
|
|
|
|
<body style="height: 10000px">
|
|
|
|
<button id="toggle">Toggle</button>
|
|
|
|
<p>
|
|
The black rectangle starts fixed, and due to a -webkit-transform will be composited. Toggle to unfix it and scroll: the black rectangle should scroll with the page and not overlap the numbers.
|
|
</p>
|
|
|
|
<div id="rect" style="background-color: black; width: 200px; height: 200px; position: fixed; -webkit-transform: translate3d(0,0,0)">
|
|
</div>
|
|
|
|
1<br>
|
|
2<br>
|
|
3<br>
|
|
4<br>
|
|
5<br>
|
|
6<br>
|
|
7<br>
|
|
8<br>
|
|
9<br>
|
|
10<br>
|
|
11<br>
|
|
12<br>
|
|
13<br>
|
|
14<br>
|
|
15<br>
|
|
16<br>
|
|
17<br>
|
|
18<br>
|
|
19<br>
|
|
20<br>
|
|
|
|
<script>
|
|
var rect = document.getElementById("rect");
|
|
var toggle = document.getElementById("toggle");
|
|
|
|
toggle.addEventListener("click", function (ev) {
|
|
if (rect.style.position === "fixed") {
|
|
rect.style.position = "";
|
|
} else {
|
|
rect.style.position = "fixed";
|
|
}
|
|
});
|
|
</script>
|