JQuery 페이드 인 스크롤 문제

나는 몇 시간 동안이 문제를 해결하려고 노력해 왔습니다.JQuery 페이드 인 스크롤 문제

저는 스크롤에 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가 먼저 표시되고 스크롤하여 페이드 아웃 한 다음 페이드 인합니다.

나는 다른 주제를 읽은 것처럼 CSS 표시를 추가하려고 시도하지 않았다. 그러나 결과가 없습니다.

모바일에서 효과를 사용하지 않으려는 시도가 어느 것도 작동하지 않습니다.

출처

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에 감사드립니다! 나는 아직도 배울 것이 많다. 감사합니다. . –

답변

관련 문제