0

ユーザーがスクロールしたときにナビゲーションにクラスを追加しようとしています。クラスは.scrollTop()値に応じて要素に追加されます。これは正常に機能していますが、ユーザーがスクロールするたびにaddClass常に発火し、クラスに CSS3 アニメーションが追加されているため、非常に明白なアーティファクトが作成されます。

ここで私の大まかな実装を参照してください

「scrollspy」や「waypoints」などのオプションがあることは認識していますが、それらを使用せずにこれを実装する方法を見つけたいと思っています (これらのライブラリでこれが発生するかどうかをテストしていません)。

これが起こらないようにする方法はありますか？ありがとう。

編集：リクエストに従ってコードを添付します。

$(window).scroll(function(){
    var scrollPos = $(window).scrollTop();
    if(scrollPos <= 100){
        $(".nav-home").addClass("selected");    
    }
    if(scrollPos > 100 && scrollPos <= 500){
        $(".nav-showcase").addClass("selected");
    }
});
4

3 に答える 3

1

コードを物語のように読む必要があります。

if(scrollPos < 100){
  $(".nav-home").addClass("selected");  
}
if(scrollPos > 100 && scrollPos < 500){
 $(".nav-showcase").addClass("selected");
}

スクロールが 100 より小さい場合は、選択したクラスを追加し.nav-home ます スクロールが 100 && 500 の場合は、選択したクラスを追加します.nav-showcase

なぜ何度も発射されるのか、もうお分かりいただけたでしょうか？

そうでない場合: 100 ～ 500 (400 ピクセル) の間にスクロールがあり、多くのスクロールが発生する可能性があるため、これら 2 つの値の間にある場合は常に発生しています。

私が言う解決策として、MRIDAの解決策に行きます：

if(scrollPos < 100){
  if(!$(".nav-home").hasClass("selected")){
    $(".nav-home").addClass("selected");
  }
}
if(scrollPos > 100 && scrollPos < 500){
  if(!$(".nav-showcase").hasClass("selected")){
    $(".nav-showcase").addClass("selected");
  }
}
于 2013-06-04T14:50:18.577 に答える
0

@Mark が先に述べたように、「コードをストーリーのように読む必要があります」。私は自分の話を十分に深く読んでいませんでした。間違った場所でクラスを削除していたため、問題が発生していました。誰かが興味を持っている場合は、上に投稿した jsbin のスニペットを修正しました。

すべての返信に感謝します。

于 2013-06-07T14:37:19.720 に答える