hasClass条件がCSSを変更していない場合Jquery

Question

私は1ページのスクロールテンプレートを使用しており、自分のnavbarを追加しました。ページスクロールでは、Navbarをアニメーション化する必要があります。本文をスクロールすると、クラスが から 'fp-viewing-0'から 'fp-viewing-1-0'に変更されます。 fp-viewing-0からfp-viewing-1-0に移動すると問題なくアニメートされますが、戻ってもアニメーション化されません。これが私の解決です。任意の提案どのようにこれを修正するには？

window.setInterval(function() { 
    if($('body').hasClass('fp-viewing-1-0')){ 
     $('.circle').animate({ 
      top:'30' 
     }); 
     $('#menuBar').animate({ 
      backgroundColor: '#fff', 

     }).css({ 
      borderBottom: '1px solid #f3f3f3' 
     }); 
     $('#menuBarWrapper').css({ 
      boxShadow:' 0 0 10px #333' 
     }); 
     console.log('white'); 
    } 

     if($('body').hasClass('fp-viewing-0')){ 
     $('.circle').animate({ 
      top:'0' 
     }); 
     $('#menuBar').animate({ 
      backgroundColor: 'none', 

     }).css({ 
      borderBottom: 'none' 
     }); 
     $('#menuBarWrapper').css({ 
      boxShadow:'none' 
     }); 
     console.log('white'); 
    } 



},10); 

Answer 1

私は少し異なったコードを作りました。ここでは、CSSを使ってアニメーションが作成されます。これは、どのクラスが現在ボディエレメント上でアクティブであるかによって異なります。私の経験から、私はjQueryアニメーションを避けようとしていますが、CSSアニメーションと比べて遅すぎます。

https://jsfiddle.net/6jo3dvzg/3/

<div id="test"> 
    <div class="circle"></div> 
    <div id="menuBar">menuBar</div> 
    <div id="menuBarWrapper">menuBarWrapper</div> 
    <div class="fp-viewing-0">fp-viewing-0</div> 
    <div class="fp-viewing-1-0">fp-viewing-1-0</div> 
</div> 

handleScroll() 
$(window).on('scroll', handleScroll) 

function handleScroll() { 
    var curr = $(window).scrollTop() 

    if(curr >= $('#test .fp-viewing-0').offset().top) { 
    $('body').removeClass().addClass('fp-viewing-0') 
    } 

    if(curr >= $('#test .fp-viewing-1-0').offset().top) { 
    $('body').removeClass().addClass('fp-viewing-1-0') 
    } 

    console.log($('body').attr('class')) 
}