スクロールダウン中にクラスを表示/削除する

Question

スクロール中にdivを表示し、別のdivを同時に削除する必要があります。 私はこのコードを試して、これは私が期待したとおりに動作しています。問題は、上にスクロールすると、削除されたクラスを表示し、現在のクラスを隠す必要があることです。 （これと反対側）

これは私のコードです。

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    if (scroll >= 0) { 
    $(".left-nav").removeClass("white-nav"); 
    } 
    }); 

最適な解決策は何ですか？

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    if (scroll > 0) { 
     $(".left-nav").removeClass("white-nav"); 
    } else { 
     $(".left-nav").addClass("white-nav"); 
    } 
}); 

Answer 1

ちょうどあなたがすでにscroll >= 0をチェックしているので、あなたはちょうどこのようelseを追加する必要があり、scrollTopが0であるときに、クラスを追加するためにaddClass()を使用スクロール・イベント・ハンドラーでは、ページをスクロールしているときに遅いパフォーマンスにつながる可能性があります。特に、スクロール中のDOM操作は、重大なパフォーマンスの問題を引き起こす可能性があります。

Answer 2

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    $(".left-nav").toggleClass("white-nav", scroll <= 0); 
}); 

しかし、注意して、複雑なコードこと：

Answer 3

あなたはコードのこの彼の平和が動作していないこの http://api.jquery.com/toggleclass/

$(window).scroll(function() {  
var scroll = $(window).scrollTop(); 
if (scroll >0) { 
$(".left-nav").toggleClass("white-nav"); 
} 
else{ 
$(".left-nav").toggleClass("white-nav"); 
} 
}); 

Answer 4

$(window).scroll(function() {  
 
    $(".left-nav").toggleClass("white-nav", $(window).scrollTop() <= 0); 
 
});

.white-nav{ 
 
    color:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='left-nav white-nav'>Hey</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<div>nothing here</div>