simplificar muchos if else

[Alekz_]

Hola chicos
tengo actualmente una duda, como se darán cuenta no programo mucho pero quisiera un consejo para esta opción.
los contextualizo, lo que intento hacer que un menú cambie según la zona de la pagina en la que este, aunque actualmente son solo colores, es para 4 item si lo hago para 10 serian demasiadas lineas de código no?; hay manera de simplificarlo con alguna funcion o ... bueno aqui les dejo lo que he usado

window.onload = initAll;
function initAll()
{

document.getElementById("item1").style.background= "#960a00";
document.getElementById("item2").style.background= "#fff";
document.getElementById("item3").style.background= "#fff";
document.getElementById("item4").style.background= "#fff";
document.getElementById("item1").style.color="#fff ";
document.getElementById("item2").style.color="#960 a00";
document.getElementById("item3").style.color="#960 a00";
document.getElementById("item4").style.color="#960 a00";
}
function checkPosition()
{
var posx = $(window).scrollLeft();

if (posx > 0 && posx <= 1450)
{


document.getElementById("item1").style.background= "#960a00";
document.getElementById("item2").style.background= "#fff";
document.getElementById("item3").style.background= "#fff";
document.getElementById("item4").style.background= "#fff";
document.getElementById("item1").style.color="#fff ";
document.getElementById("item2").style.color="#960 a00";
document.getElementById("item3").style.color="#960 a00";
document.getElementById("item4").style.color="#960 a00";

}
else if (posx > 1450 && posx <= 3400)
{

document.getElementById("item1").style.background= "#fff";
document.getElementById("item2").style.background= "#960a00";
document.getElementById("item3").style.background= "#fff";
document.getElementById("item4").style.background= "#fff";
document.getElementById("item1").style.color="#960 a00";
document.getElementById("item2").style.color="#fff ";
document.getElementById("item3").style.color="#960 a00";
document.getElementById("item4").style.color="#960 a00";
}
else if (posx > 3400 && posx <=5440)
{

document.getElementById("item1").style.background= "#fff";
document.getElementById("item2").style.background= "#fff";
document.getElementById("item3").style.background= "#960a00";
document.getElementById("item4").style.background= "#fff";
document.getElementById("item1").style.color="#960 a00";
document.getElementById("item2").style.color="#960 a00";
document.getElementById("item3").style.color="#fff ";
document.getElementById("item4").style.color="#960 a00";
}
else if (posx > 4840 && posx <=6700)
{

document.getElementById("item1").style.background= "#fff";
document.getElementById("item2").style.background= "#fff";
document.getElementById("item3").style.background= "#fff";
document.getElementById("item4").style.background= "#960a00";
document.getElementById("item1").style.color="#960 a00";
document.getElementById("item2").style.color="#960 a00";
document.getElementById("item3").style.color="#960 a00";
document.getElementById("item4").style.color="#fff ";

}

}

$(window).scroll( checkPosition );

[Aijoona]

1. Utiliza el highlight asi el código queda formateado.
2. Si usas jQuery para algunas cosas, porque no para todo?

-----------------

El condicional no vale la pena simplificarlo, pero podes encapsular la lógica utilizada:

Código Javascript:

window.onload = initAll;
 
function initAll() {
    active('#item1');
}
 
function active(selector) {
    $('#item1, #item2, #item3, #item4').css({
        'background-color': '#fff',
        'color': "#960a00"
    });
 
    $(selector).css({
        'background-color': '#960a00',
        'color': "#fff"
    });
}
 
function checkPosition() {
    var posx = $(window).scrollLeft();
 
    if (posx > 0 && posx <= 1450) {
        active('#item1');
    } else if (posx > 1450 && posx <= 3400) {
        active('#item2');
    } else if (posx > 3400 && posx <= 5440) {
        active('#item3');
    } else if (posx > 4840 && posx <= 6700) {
        active('#item4');
    }
 
}
 
$(window).scroll(checkPosition);