Issue to fadeout elements with jquery waypoints plugin

Question

as you can see on this jsfiddle I'm trying to fade out elements when they enter viewport, using waypoints plugin. Unfortunately this is not working - nothing fades out. Any idea why? Many thanks

CSS and HTML

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.pre-block {
    background: green;
    width:90%;
    Height: 800px;
    margin-bottom:50px;
}
.block {
    background: red;
    width:90%;
    Height: 200px;
}
.col1, .col2, .col3, .col4 {
    float: left;
    width: 25%;
    background: red;
    text-align: center;
    font-size: 12px;
    color: #fff;
    font-weight: 300;
    height: 24px;
    vertical-align: middle;
    display: table-cell;
}
.c1 {
    background: #253151;
}
.c2 {
    background: #253151;
    border-left: 1px #FFF solid;
}
.c3 {
    background: #253151;
    border-left: 1px #FFF solid;
}
.c4 {
    background: #253151;
    border-left: 1px #FFF solid;
}


<div class="pre-block"></div>
<div class="block">
    <div class="col1 c1">dsqd</div>
    <div class="col2 c2">sdsqdss</div>
    <div class="col3 c3">sdqsdsq</div>
    <div class="col4 c4">sdsqd</div>
</div>
<script src="http://imakewebthings.com/jquery-waypoints/jquery.js">
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.js">

JS

$('.block').waypoint(function() {
   $(".col1").delay(10).fadeOut("slow");
   $(".col2").delay(20).fadeOut("slow");
   $(".col3").delay(30).fadeOut("slow");
   $(".col4").delay(40).fadeOut("slow");
}, { offset: 10 });

Answer 1

Your provided offset: 10 is not able to reach in fiddle. Increase the offset and all is perfect.

Answer 2

Live Demo

It works perfectly. I added an alert('ok'); to the function and made the display iframe a bit smaller and I get the expected result:

Maybe this offset would be better:

offset: $(window).height()