JQuery Fade-in onscroll проблемы

Я пытался решить эту проблему в течение нескольких часов.JQuery Fade-in onscroll проблемы

Я хотел бы Fadein div на свитке.

Тогда я хотел бы установить правило для отключения этого эффекта на мобильных устройствах.

Это мой код

<style> 
#conteneur5 { 
height:220px; 
width:1080px; 
background:#EFEFEF 
;} 
</style>  

<body> 
<div class="wow"> 
<div id="conteneur5"> 
<table width="1065" height="195"></table> 
</div> 
</div> 
</body> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> $(document).scroll(function() { 
if (screen.width > 770) { 
$('.wow').hide(); } 
else { 

$('.wow').show(); 
} 
var y = $(this).scrollTop(); 
if (y > 130) { 
$('.wow').fadeIn(); 
} else { 
$('.wow').fadeOut(); 
} 
}); 
</script>

Я пробовал много различных комбинаций, но никто не работал.

С приведенной выше последовательностью Fadein работает, но div сначала видимый, затем затухание на прокрутке, затем fadein.

Я попытался добавить отображение: нет в css inline, как я читал по другой теме. Но без результата.

Моя попытка отключить действие на мобильном устройстве не работает.

источник

2015-01-29 Theodore.us

что-то вроде этого? http://jsfiddle.net/swm53ran/166/

<div class="space"> 
</div> 
<div class="content"> 
    FADEIN 
</div> 

$(document).ready(function() { 
    myFunction(); 
    $(window).resize(function() {   
     myFunction(); 
    }); 

    function myFunction() { 
     var width = $(window).width(); 
     console.log(width); 
     console.log((width > 770)); 
     if (width > 770) { 
      $(document).on('scroll', function() { 
       if ($(this).scrollTop() > 130) { 
        $('.content').fadeIn(); 
       } 
      }); 
     } 
     else { 
      $('.content').hide(); 
      $(document).unbind('scroll'); 
     } 
    } 

}); 

.space { 
    height: 200px; 
} 
.content { 
    display:none; 
    height: 100px; 
    background-color: lightgray; 
} 
body { 
    height: 1000px; 
}

источник

2015-01-29 14:10:59 indubitablee

Спасибо! Элемент затухает правильно. Мне нужно снова установить свойство Fadeout, если пользователь переместится назад. Не могли бы вы рассказать мне самый простой способ добиться этого? О мобильном дисплее все еще не работает. Я просто хочу отключить эффект Fadein на мобильных устройствах. Другими словами, элемент должен отображаться как обычно. Спасибо и извините мою грамматику. –

@ Theodorus см. Обновленную скрипту: http://jsfiddle.net/swm53ran/174/ – indubitablee

Спасибо за ваше AWESOMENESS! Мне еще многое предстоит узнать. Спасибо. –

ответ

Смежные вопросы