jquery - スクロール位置に基づいて jQuery ロゴをフェードする

Question

私はjQuery（初心者）でタスクを達成しようとしていますが、1つのステップを除いてほとんどすべてを理解しました。ページを 250px 下にスクロールした後にフェードアウトするロゴがあります。また、下にスライドしてロゴを押し下げるトップナビゲーションもあります。ページの 250 ピクセルを超えると、ロゴの不透明度が再び表示され、ナビゲーションを閉じると消えます。これはすべて正常に機能しています。

私の問題は、ページの最初の 250 ピクセル以内にいるときです。ナビを開閉すると、ナビを閉じるとロゴが完全にフェードアウトします。ページの最初の 250px のスクロール位置に基づいて、不透明度に戻りたいと思います。

例 (768px 以上の幅のブラウザーで表示する必要があります): http://staging.michalekbrothersracing.com/

私が使用しているコードは次のとおりです。

<!--LOGO FADE-->
$(document).ready(function(){
    $(document).scroll(function(){
        var top=$(this).scrollTop();
        if(top<250){
            var dif=1-top/250;
            $(".logo").css({opacity:dif});
        }
    })
});

function toggle(id) {
      var el = document.getElementById(id);
      var box = el.getAttribute("class");
      if(box == "hide"){
          el.setAttribute("class", "show");
          $('.logo').fadeTo(250, '1');
      }
      else{
          el.setAttribute("class", "hide");
          $('.logo').fadeTo(250, '0');
      }
  }

私の「else」ステートメントがこれを台無しにしていると思います。ナビゲーションを切り替えるときに、スクロール位置がどこにあるかに基づいてルールを追加し始める方法を理解するのに苦労しています。

提案やヒントをいただければ幸いです。お時間をありがとうございました！