Как сделать чтоб условия не перезаписывались?

Александр Васильев, я не понял что значит отдавать в прод, если про продажу. То я себе делаю, только ради обучения. Так что покачто не задумываюсь об структуре аккуратной.

Как сделать чтоб условия не перезаписывались?

То что нужно! Спасибо большое.

Как сделать чтоб условия не перезаписывались?

VoidVolker, нужно чтоб после скролла нескольких блоков фон менялся. Здесь функция принимает параметры для двух смен, из них работает только одна, потому-что второй аргумент перебивает значения первого. или что то такое. Я сам не особо понимаю, вот и пишу... Простите сразу, я только учусь. У меня есть рабочий код без функции:

const back = document.getElementById('back');
    const pathImg_1 = "/img/back/back.avif";
    const pathImg_2 = "/img/back/back_2.jpg";
    const pathImg_3 = "/img/back/back.avif";
    
    window.addEventListener('scroll', ()=>{     
        const style_1box = window.getComputedStyle(document.getElementById('main'), null);
        const margins_1box = parseFloat(style_1box.marginTop) + parseFloat(style_1box.marginBottom);
        const hight_1box = document.getElementById('main').offsetHeight + margins_1box;
    
        const style_header = window.getComputedStyle(document.getElementById('header'), null);
        const margins_header = parseFloat(style_header.marginTop) + parseFloat(style_header.marginBottom);
        const header = document.getElementById('header').offsetHeight + margins_header;
    
        const style_scillsBox = window.getComputedStyle(document.getElementById('scills_box'), null);
        const margins_scillsBox = parseFloat(style_scillsBox.marginTop) + parseFloat(style_scillsBox.marginBottom);
        const hight_2box = document.getElementById('scills_box').offsetHeight + margins_scillsBox;
    
        const style_about = window.getComputedStyle(document.getElementById('about'), null);
        const margins_about = parseFloat(style_about.marginTop) + parseFloat(style_about.marginBottom);
        const hight_3box = document.getElementById('about').offsetHeight + margins_about;
    
        
        const style_projects = window.getComputedStyle(document.getElementById('projects_box'), null);
        const margins_projects = parseFloat(style_projects.marginTop) + parseFloat(style_projects.marginBottom);
        const hight_projects = document.getElementById('projects_box').offsetHeight + margins_projects;
        
        let shift_1 = header + hight_1box;
        let scrollPosition = window.scrollY;
        let shift_2 = header + hight_1box + hight_2box + hight_3box;
    
        if(scrollPosition <= shift_1){
            back.style.backgroundImage = `url(${pathImg_1})`;
        }
        if(scrollPosition >= shift_1 && scrollPosition <= shift_2){
            back.style.backgroundImage = `url(${pathImg_2})`;
        }
        if(scrollPosition >= shift_2){
            back.style.backgroundImage = `url(${pathImg_1})`;
        }
    
    })

но я хочу сделать по красивее