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

Question

[Mewinal]

function shiftBackground(changes) {
        changes.forEach(el =>{
    
            const boxs = el[0];
            const pathImg = el[1];
            const pathImg_defalt = el[2];
            const _box = el[3];
    
            const back = document.getElementById('back');
            let scrollPosition = window.scrollY;
            let shift = 0;
        
            const _box_style = window.getComputedStyle(document.getElementById(_box), null);
            const _box_margins = parseFloat(_box_style.marginTop) + parseFloat(_box_style.marginBottom);
            const _box_hight = document.getElementById(_box).offsetHeight + _box_margins;
            
            boxs.forEach(box => {
                const style = window.getComputedStyle(document.getElementById(box), null);
                const margins = parseFloat(style.marginTop) + parseFloat(style.marginBottom);
                const hight = document.getElementById(box).offsetHeight;
                shift += hight + margins;
            });
            
            if(scrollPosition < shift){
                back.style.backgroundImage = `url(${pathImg_defalt})`;
            }
            if(scrollPosition >= shift && scrollPosition < shift + _box_hight){
                back.style.backgroundImage = `url(${pathImg})`;
            }
        })
    }
    window.addEventListener('scroll', () => {
        shiftBackground([[['header', 'main'], '/img/back/back_2.jpg', '/img/back/back.avif', 'about'],
                        [['header', 'main', 'scills_box', 'about'], '/img/back/back.jpg', '/img/back/back.avif', 'contacts']]);
    });

Comments

[VoidVolker]

Mewinal и в чём у вас проблема? Что у вас не получается с отладкой вашего кода?

[Mewinal]

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})`;
        }
    
    })

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

[Ankhena]

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

Чтобы покрасивее:
0. сделать песочницу с кодом и видимой проблемой на codepen.io или аналогах
1. Подробно описать задачу (только конкретно, что не получается)
2. Возможно, вам поможет IntersectionObserver MDN
3. Возможно, будет удобнее манипулировать классами или кастомными свойствами в CSS, чем инлайнить стили. Мне так больше нравится.

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

Полностью задача не описана. Там что, два фона должны применится одновременно?
Так они пишутся через запятую. Тык
Опять таки, удобнее классами/кастомками.

[Александр Васильев]

ты когда в прод это будешь отдавать, подумай о людях - они должны без проблем менять твои картинки на свои

[Илья]

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;

Так делать не нужно

Answer 1

[Алексей Уколов]

У вас же только один фон должен примениться по итогу, а вы в каждой итерации цикла там ещё и дефолтную картинку можете вставлять.
Ваш код (с минимальными измененями) должен выглядеть примерно так:

function shiftBackground(changes) {
    let img = '/img/back/back.avif';

    let scrollPosition = window.scrollY;

    changes.forEach(([boxs, pathImg, _box]) => {
        let shift = 0;

        const _box_style = window.getComputedStyle(document.getElementById(_box), null);
        const _box_margins = parseFloat(_box_style.marginTop) + parseFloat(_box_style.marginBottom);
        const _box_height = document.getElementById(_box).offsetHeight + _box_margins;

        boxs.forEach(box => {
            const style = window.getComputedStyle(document.getElementById(box), null);
            const margins = parseFloat(style.marginTop) + parseFloat(style.marginBottom);
            const height = document.getElementById(box).offsetHeight;
            shift += height + margins;
        });

        if (scrollPosition >= shift && scrollPosition < shift + _box_height) {
            img = pathImg;
        }
    })

    const back = document.getElementById('back');
    back.style.backgroundImage = `url(${img})`;
}

window.addEventListener('scroll', () => {
    shiftBackground(
        [
            [['header', 'main'], '/img/back/back_2.jpg', 'about'],
            [['header', 'main', 'scills_box', 'about'], '/img/back/back.jpg', 'contacts'],
        ]
    );
});

P.S. Но вообще, скорее всего, это можно переписать на использование Intersection Observer. И код проще будет и производительность выше. Ну и не придётся руками перечислять предыдущие блоки. Но не очень вообще понятна требуемая логика: почему, во втором случае появился какой-то scills_box между main и about...

Comments

[Mewinal]

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