Recently, I attempted to create a floating input element that would follow the scroll. After much effort, I managed to achieve it and the code is provided below.
However, I encountered an issue when trying to change "setText(window.scrollY)" to "document.querySelector(".code).style.top = window.scrollY". Surprisingly, the latter doesn't yield the same result even though I believe it's essentially the same code. Can someone shed light on why this might be happening? Thank you.
import React, { useState } from "react";
function Input() {
const [scroll, setScroll] = useState(0);
window.addEventListener(
"scroll",
function () {
if (typeof document.querySelector(".code") === "undefined") {
alert("TT");
} else {
setScroll(window.scrollY); // *this part
}
},
{ passive: true }
);
return (
<input
style={{
top: text
}}
className="code"
autoComplete="on"
placeholder="Write code please"
/>
);
}
export default Input;