검색 상자 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 if가 사용 된 후 다른 두 개는 항상 건너 뛰게되는 조건을 설정합니다. 보류중인 애니메이션 디큐/관련없는 간격을 사용하지만 윈도우 scroll` 이벤트 및 디 바운스를 '내부의 논리를 설정하고 중지하지 마십시오, 첫째

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);