検索ボックスのmouseenterとmouseoverイベントはscrollTopイベントでは機能しません

Question

ページ上部に検索ボックスを作成しました ページがスクロールダウンすると、検索ボックスの不透明度が0.75 に変更され、ページがスクロールアップされます。検索ボックスの不透明度が1 に変更されました。不透明度を1に戻すために検索ボックスをクリック（デスクトップ上）またはクリック（モバイルで）したときに動作しません。

ここ

私のデモページです -

から http://demo.codefuel.com/thegreatest/testpage.html?hiddenMode=true

ここでは、イベントコードの一部です

 var intervall = setInterval(function(){ 

      if ($(window).scrollTop() > 100 && $(window).scrollTop() < 505) { 
        $('#bg_wrapper,#searchbox').animate({ 'opacity': 0.75 }, 500); 
      } 
      else if ($(window).scrollTop() > 500) { 
        $('#bg_wrapper,#searchbox').animate({ 'top': -100, 'opacity': 0.75 }, 500); 
      } 
      else if ($('#bg_wrapper').mouseover()) { 
        $('#bg_wrapper,#searchbox').animate({ 'opacity': 1 }, 500); 
      }      
      else { 
        $('#bg_wrapper,#searchbox').animate({ 'top': 0, 'opacity': 1 }, 300); 
      } 
     },500); 

Answer 1

これは簡単なことですが、ロジックが壊れています。

最初のifまたはelseのどちらかを使用し、残りの2つは常にスキップされる条件を設定します。

ここで修正されたバージョンです：

var intervall = setInterval(function(){ 
     if ($(window).scrollTop() > 100 && $(window).scrollTop() < 505) { 
       $('#bg_wrapper,#searchbox').animate({ 'opacity': 0.75 }, 500); 
     } 
     else if ($(window).scrollTop() > 500) { 
       $('#bg_wrapper,#searchbox').animate({ 'top': -100, 'opacity': 0.75 }, 500); 

       if ($('#bg_wrapper').mouseover()) { 
         $('#bg_wrapper,#searchbox').animate({ 'opacity': 1 }, 500); 
       } 
     }   
     else { 
       $('#bg_wrapper,#searchbox').animate({ 'top': 0, 'opacity': 1 }, 300); 
     } 
    },500);