0

というリストがあり#navigationます。navページのさまざまなセクションで、ペイン内のリスト項目の色を変更して、nav個々のセクションのドットがオレンジ色になり、他のセクションが白くなるようにしようとしています。
それぞれに、アスタリスクが数字である場所のnavdotid が与えられます。 ページ自体は、ナビゲーションがユーザーをページの特定のセクションまでスクロールする単一のページです。ナビゲーションのリストには #navigation という ID が与えられます。基本的に、スクロール機能を使用して確認しようとしています。特定のパラメーターを満たしている場合、一番上のスライドが特定のセクションの最初であることがわかります。次に、その高さ情報を使用して、新しいセクションに到達するまでリスト項目の色を変更したいと考えています。 #dot*
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

==比較に使用する代わりに、<=またはを使用します>=。scrollTop()値が DOM 要素の高さの組み合わせと正確に一致するという保証はありません。

于 2013-08-27T13:15:45.950 に答える