If statements that use the scrollTop function to change the color of
navigation div items at various heights not firing.
I have a list called #navigation. I am trying to at various sections on
the page change the color of the list items in the nav pane so that the
nav dot for each individual section is orange and the others are white.
Each "navdot" is given an id of #dot* where the asterisk is the number.
The page it self is a single page where the navigation scrolls the user
down to a specific section of the page. The list for the navigation is
given the id of #navigation. Basically, I am trying to use a scroll
function to check the scrollTop and if it meets certain parameters, those
being that the top slide is the first of a certain section. I want to then
use that height information to change that list items color until it gets
to a new section.
// JavaScript Document
$( document ).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() == 0) {
$("#navigation>li").css("color","#FFFFFF");
$("#dot1").css("color","#D96C29");
}
if($(window).scrollTop() == $("#slide1").height()) {
$("#navigation>li").css("color","#FFFFFF");
$("#dot2").css("color","#D96C29");
}
if($(window).scrollTop() == $("#slide1").height() +
$("#slide2").height()) {
$("#navigation>li").css("color","#FFFFFF");
$("#dot3").css("color","#D96C29");
}
if($(window).scrollTop() == $("#slide1").height() +
$("#slide2").height() + $("#slide3").height()) {
$("#navigation>li").css("color","#FFFFFF");
$("#dot4").css("color","#D96C29");
}
if($(window).scrollTop() == $("#slide1").height() +
$("#slide2").height() + $("#slide3").height() +
$("#slide4").height() + $("#slide5").height()) {
$("#navigation>li").css("color","#FFFFFF");
$("#dot5").css("color","#D96C29");
}
if($(window).scrollTop() == $("#slide1").height() +
$("#slide2").height() + $("#slide3").height() +
$("#slide4").height() + $("#slide5").height() +
$("#slide6").height() + $("#slide7").height()) {
$("#navigation>li").css("color","#FFFFFF");
$("#dot6").css("color","#D96C29");
}
if($(window).scrollTop() == $("#slide1").height() +
$("#slide2").height() + $("#slide3").height() +
$("#slide4").height() + $("#slide5").height() +
$("#slide6").height() + $("#slide7").height() +
$("#slide8").height() + $("#slide9").height()) {
$("#navigation>li").css("color","#FFFFFF");
$("#dot7").css("color","#D96C29");
}
if($(window).scrollTop() == $("#slide1").height() +
$("#slide2").height() + $("#slide3").height() +
$("#slide4").height() + $("#slide5").height() +
$("#slide6").height() + $("#slide7").height() +
$("#slide8").height() + $("#slide9").height() +
$("#slide10").height() + $("#slide11").height()) {
$("#navigation>li").css("color","#FFFFFF");
$("#dot8").css("color","#D96C29");
}
if($(window).scrollTop() == $("#slide1").height() +
$("#slide2").height() + $("#slide3").height() +
$("#slide4").height() + $("#slide5").height() +
$("#slide6").height() + $("#slide7").height() +
$("#slide8").height() + $("#slide9").height() +
$("#slide10").height() + $("#slide11").height() +
$("#slide12").height() + $("#slide13").height()) {
$("#navigation>li").css("color","#FFFFFF");
$("#dot9").css("color","#D96C29");
}
if($(window).scrollTop() == $("#slide1").height() +
$("#slide2").height() + $("#slide3").height() +
$("#slide4").height() + $("#slide5").height() +
$("#slide6").height() + $("#slide7").height() +
$("#slide8").height() + $("#slide9").height() +
$("#slide10").height() + $("#slide11").height() +
$("#slide12").height() + $("#slide13").height() +
$("#slide14").height() + $("#slide15").height() ) {
$("#navigation>li").css("color","#FFFFFF");
$("#dot10").css("color","#D96C29");
}
if($(window).scrollTop() == $("#slide1").height() +
$("#slide2").height() + $("#slide3").height() +
$("#slide4").height() + $("#slide5").height() +
$("#slide6").height() + $("#slide7").height() +
$("#slide8").height() + $("#slide9").height() +
$("#slide10").height() + $("#slide11").height() +
$("#slide12").height() + $("#slide13").height() +
$("#slide14").height() + $("#slide15").height() +
$("#slide16").height() + $("#slide17").height()) {
$("#navigation>li").css("color","#FFFFFF");
$("#dot11").css("color","#D96C29");
}
if($(window).scrollTop() + $(window).height() ==
$(document).height()) {
$("#navigation>li").css("color","#FFFFFF");
$("#dot12").css("color","#D96C29");
}
});
});
No comments:
Post a Comment