JQuery 淡入滚动问题

Question

我已经尝试解决这个问题几个小时了。

我想在滚动条上淡入 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>

我尝试了很多不同的组合，但 none 奏效了。

通过上述序列，淡入有效，但 div 首先可见，然后在滚动时淡出，然后淡入。

我尝试在 css 中内联添加 display:none，因为我已经阅读了另一个主题。但是没有结果。

我在移动设备上禁用效果的尝试均无效。

Answer 1

像这样的？ 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;
}

JQuery 淡入滚动问题

JQuery Fade-in onscroll problems

mobile

jquery

scroll

fadein