как уменьшить простой блок кода if else

206

12 апреля 2017, 14:52

Есть страничка с высотой 4600 пикселей и есть блок кода которое при скролле плавно приближает элементов справа налево или наоборот, но код получился слишком длинным так, как страничка длинная. Подскажите, пожалуйста, можно его как-то уменьшить?

var withAp = document.querySelector('.withAp');
var textSkills = document.querySelector(".text-skills")
var goaltext = document.querySelector('.goal-text')
window.onscroll = function() {
    //Определяем наше текущее место на странице
    var scrolled = window.pageYOffset || document.documentElement.scrollTop;
    //Задаём значение от куда до куда работают свойства
    if (scrolled < 100) {
        withAp.style.marginRight = '0';
        withAp.style.opacity = '0.1';
    }
    if (scrolled > 100) { 
        withAp.style.marginRight = '30px';
        withAp.style.opacity = '0.2';
    }
    if (scrolled > 200) { 
        withAp.style.marginRight = '50px';
        withAp.style.opacity = '0.2';
    }
    if (scrolled > 300) {
        withAp.style.marginRight = '80px';
        withAp.style.opacity = '0.4';
    }
    if (scrolled > 400) {
        withAp.style.marginRight = '100px';
        withAp.style.opacity = '0.5';
    }
    if (scrolled > 500) {
        withAp.style.marginRight = '120px';
        withAp.style.opacity = '0.6';
    }
    if (scrolled > 600) {
        withAp.style.marginRight = '150px';
        withAp.style.opacity = '0.7';
    }
    if (scrolled > 700) {
        withAp.style.marginRight = '180px';
        withAp.style.opacity = '0.8';
    }
    if (scrolled > 800) { 
        withAp.style.marginRight = '200px';
        withAp.style.opacity = '1';
    }
    //===============text skills==============================
    if (scrolled < 700) {
        textSkills.style.marginRight = "0px";
        textSkills.style.opacity = "0";
    }
    if (scrolled > 800) {
        textSkills.style.marginRight = "20px";
        textSkills.style.opacity = "0.3";
    }
    if (scrolled > 900) {
        textSkills.style.marginRight = "30px";
        textSkills.style.opacity = "0.5";
    }
    if (scrolled > 1000) {
        textSkills.style.marginRight = "40px";
        textSkills.style.opacity = "0.6";
    }
    if (scrolled > 1100) {
        textSkills.style.marginRight = "50px";
        textSkills.style.opacity = "0.7";
    }
    if (scrolled > 1200) {
        textSkills.style.marginRight = "60px";
        textSkills.style.opacity = "0.8";
    }
    if (scrolled > 1300) {
        textSkills.style.marginRight = "70px";
        textSkills.style.opacity = "1";
    }
    //=====================goal-text===================
    if (scrolled < 1800) {
        goaltext.style.marginLeft = "-80px";
        goaltext.style.opacity = "0";
    }
    if (scrolled > 1700) {
        goaltext.style.marginLeft = "0px";
        goaltext.style.opacity = "0.2";
    }
    if (scrolled > 1800) {
        goaltext.style.marginLeft = "10px";
        goaltext.style.opacity = "0.4";
    }
    if (scrolled > 1900) {
        goaltext.style.marginLeft = "30px";
        goaltext.style.opacity = "0.6";
    }
    if (scrolled > 2000) {
        goaltext.style.marginLeft = "40px";
        goaltext.style.opacity = "0.7";
    }
    if (scrolled > 2100) {
        goaltext.style.marginLeft = "50px";
        goaltext.style.opacity = "0.8";
    }
    if (scrolled > 2200) {
        goaltext.style.marginLeft = "60px";
        goaltext.style.opacity = "1";
    }
};

Answer 1

Изначальный код содержит логические не точности.

Блок withAp дыра в точке 100. Приписал к первому диапазону.

Блоки text skills и goal-text не описал: логические ошибки в диапазонах. < 700, >800 - А между?

< 1800, > 1700 - диапазоны пересекаются.

Для описания диапазонов использую обозначения: [ - включительно, ( - не включительно

    var withAp = document.querySelector('.withAp');
    var textSkills = document.querySelector(".text-skills")
    var goaltext = document.querySelector('.goal-text')
    window.onscroll = function() {
        //Определяем наше текущее место на странице
        var scrolled = window.pageYOffset || document.documentElement.scrollTop;
        //Задаём значение от куда до куда работают свойства
        scrolled = (scrolled-0.001) / 100 | 0; //-0.001 - для того что бы 200 попал в диапазон (100,200] и т.д. По факту получаем диапазон [100.001,200,001).
//Задаю массивы.
        var margin = ["0","30px","50px","80px","100px","120px","150px","180px","200px"];
        var opacity = ["0.1","0.2","0.2","0.4","0.5","0.6","0.7","0.8","1"];
//Само присвоение.
        withAp.style.marginRight = scrolled<1 ? margin[0] : (scrolled > 8 ? margin[8] : margin[scrolled]); //Если меньше 100, то margin[0], если больше 800, то margin[8].
        withAp.style.opacity = scrolled<1 ? opacity[0] : (scrolled > 8 ? opacity[8] : opacity[scrolled]); //аналогично.
//===============text skills==============================
//по аналогии
//=====================goal-text===================
//по аналогии
    };