JQuery Fade-in onscroll problems

I have been trying to resolve this problem for several hours.

I would like to Fadein a div on scroll.

Then I would like to set up a rule for disabling that effect on Mobile devices.

This is my code

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

I have tried many different combinations but none worked.

With the above sequence the Fadein works but the div is first visible then fadeout on scroll then fadein.

I tried to add display:none in css inline as I've read on another topic. But with no result.

My attempt to disable the effect on mobile is not working neither.

Solution

something like this? 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;
}