I have a set of images that I am trying to activate (change opacity) based on the position of a user's window. The below code works, but only through a long series of if else statements. Is there a way to shorten the below code?
//Function to activate and deactivate the buttons on the side menu
function navIndicator() {
var winNow = $(window).scrollTop();
var posRoi = $('#roi').offset();
var posRoiNow = posRoi.top;
//Activate the propper button corresponding to what section the user is viewing
if (winNow == posRoiNow * 0) {
$('#homeBut a img.active').stop().animate({
opacity: 1
} {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#homeBut').addClass("viewing")
} else {
$('#homeBut a img.active').stop().animate({
opacity: 0
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#homeBut').removeClass("viewing")
}
if (winNow == posRoiNow) {
$('#roiBut a img.active').stop().animate({
opacity: 1
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#roiBut').addClass("viewing")
} else {
$('#roiBut a img.active').stop().animate({
opacity: 0
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#roiBut').removeClass("viewing")
}
if (winNow == posRoiNow * 2) {
$('#dmsBut a img.active').stop().animate({
opacity: 1
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#dmsBut').addClass("viewing")
} else {
$('#dmsBut a img.active').stop().animate({
opacity: 0
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#dmsBut').removeClass("viewing")
}
if (winNow == posRoiNow * 3) {
$('#techBut a img.active').stop().animate({
opacity: 1
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#techBut').addClass("viewing")
} else {
$('#techBut a img.active').stop().animate({
opacity: 0
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#techBut').removeClass("viewing")
}
if (winNow == posRoiNow * 4) {
$('#impBut a img.active').stop().animate({
opacity: 1
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#impBut').addClass("viewing")
} else {
$('#impBut a img.active').stop().animate({
opacity: 0
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#impBut').removeClass("viewing")
}
if (winNow == posRoiNow * 5) {
$('#virBut a img.active').stop().animate({
opacity: 1
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#virBut').addClass("viewing")
} else {
$('#virBut a img.active').stop().animate({
opacity: 0
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#virBut').removeClass("viewing")
}
if (winNow == posRoiNow * 6) {
$('#biBut a img.active').stop().animate({
opacity: 1
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#biBut').addClass("viewing")
} else {
$('#biBut a img.active').stop().animate({
opacity: 0
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#biBut').removeClass("viewing")
}
if (winNow == posRoiNow * 7) {
$('#contBut a img.active').stop().animate({
opacity: 1
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#contBut').addClass("viewing")
} else {
$('#contBut a img.active').stop().animate({
opacity: 0
}, {
queue: false,
duration: 300,
easing: "easeOutExpo"
});
$('#contBut').removeClass("viewing")
}
};
