0

我有一个名为#navigation. 我试图在页面上的各个部分更改nav窗格中列表项的颜色，nav以便每个单独部分的点为橙色，其他部分为白色。
每个navdot都有一个 id，#dot*其中星号是数字。
它本身的页面是一个页面，其中导航将用户向下滚动到页面的特定部分。导航列表的 ID 为#navigation。基本上，我正在尝试使用滚动功能来检查scrollTop是否满足某些参数，即顶部幻灯片是某个部分的第一个。然后我想使用该高度信息来更改该列表项的颜色，直到它进入一个新部分。 

    // 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");
   }
   });
});
4

1 回答 1

1

而不是==用于比较，您使用<=or >=。无法保证该scrollTop()值与 DOM 元素的组合高度完全匹配。

于 2013-08-27T13:15:45.950 回答