I am trying to link a style.transform = translate to the scroll but it is not working. Other attributes are responding. Would be glad for any support :)
window.addEventListener('scroll', () => {
let y = 1 + (window.scrollY || window.pageYOffset) / 20;
y = y < 1 ? 1 : y; // ensure y is always >= 1 (due to Safari's elastic scroll)
position = '"translate(0,' + '-' + y + 'vh)"'
document.getElementById("marqueeup").style.transform = position;
})#marqueeup {
width: 200px;
height: 100px;
background-color: red;
}
#placeholder{
width: 100px;
height: 600px;
background-color: blue;
}<div id="marqueeup"></div>
<div id="placeholder"></div>Remove the double quoting.
use position = 'translate(0,' + '-' + y + 'vh)'
Or even better use template literals so
position = `translate(0,-${y}vh)`
window.addEventListener('scroll', () => {
let y = 1 + (window.scrollY || window.pageYOffset) / 20;
y = y < 1 ? 1 : y; // ensure y is always >= 1 (due to Safari's elastic scroll)
const position = `translate(0,-${y}vh)`;
document.getElementById("marqueeup").style.transform = position;
})#marqueeup {
width: 200px;
height: 100px;
background-color: red;
}
#placeholder {
width: 100px;
height: 600px;
background-color: blue;
}<div id="marqueeup"></div>
<div id="placeholder"></div>