12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- <html>
- <body style="height: 10000px">
- <button id="toggle">Toggle</button>
- <p>
- The black rectangle starts fixed, and due to a 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; 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>
|