I am trying the slice a digit and add it in a style.backgroundPosition function but it's always returning 2040 instead of 20 + 20 = 40. This is just an example the actual number to add is dynamically added depending on the pageYOffset.
JS:
let bg = document.querySelector('body .section_1')
let bgPos = window.getComputedStyle(bg).getPropertyValue('background-position'); // returns '20% 0' (without quotes)
let bgPosNum = bgPos.slice(0, 2)
let bgPosArr = bgPosNum.toString()
document.addEventListener('scroll', () => {
let x = window.pageYOffset
bg.style.backgroundPosition = '' + (bgPosNum + x/6) + '% 0';
})
Thanks to everyone who replied, I fixed it with Code Maniac's code:
let bg = document.querySelector('body .section_1')
let bgPos = window.getComputedStyle(bg).getPropertyValue('background-position');
let bgPosNum = bgPos.slice(0, 2)
let bgPosStr = parseInt(bgPosNum)
document.addEventListener('scroll', () => {
let x = window.pageYOffset
bg.style.backgroundPosition = '' + (bgPosNum + x/6) + '% 0';
})