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>

我尝试了很多不同的组合，但都没有。

按照上面的顺序，Fadein可以工作，但div首先可见，然后在滚动时淡出然后fadein。

我尝试在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 Fade-in onscroll问题

1 个答案: