0

Я создал окно поиска вверху страницы, , когда страница прокручивается в поле поиска, непрозрачность меняется на 0,75 , когда страница прокручивается назад непрозрачность окна поиска будет изменена на 1 ошибка - я хочу, чтобы при открытии окна поиска или щелчке (на рабочем столе) или на ленте (на мобильном телефоне), чтобы вернуть непрозрачность в 1, но он не работаетПоиск событий в ящике мыши и mouseover не работает с событием scrollTop

вот моя демонстрационная страница - 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); 
+0

Во-первых, не используйте ненужную интервал времени, но установить логику внутри 'события окна scroll' и дребезга Оно и остановить/Dequeue незавершенными анимации –

ответ

0

Это прост, логика нарушена.

Вы устанавливаете условие, при котором либо первое, либо второе, если будет использовано, а затем два других будут пропускаться все время.

Вот исправленный вариант:

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