Javascript 使用jquery waypoints插件发布淡出元素

正如您在上所看到的，我正在尝试在元素进入视口时淡出它们，使用。不幸的是，这不起作用-没有任何东西会消失。知道为什么吗？非常感谢

CSS和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">

---

您提供的偏移量：10无法在小提琴中达到。 增加偏移量，一切都是完美的

它工作得很好。我添加了一个

警报（'ok'）并使显示iframe稍微小一点，我得到了预期的结果：


也许这个补偿会更好：

offset: $(window).height()

谢谢，你知道为什么它不能在现场环境下工作吗？见多识广thanks@Greg因为
400
是不够的。把它弄大点。例如
1000
。或者用我之前说的
$（window.height（）
什么更好。谢谢。刚刚更新了链接，但链接也不起作用。这很奇怪，当.block left的顶部距离视口顶部400px时，col1、col2等将开始淡出。天哪，这让我很沮丧crazy@Greg然后尝试
$（窗口）。高度（）-400
。也不起作用（链接已更新）。我想我会为此创建一个单独的帖子。谢谢你的帮助！谢谢，你知道为什么它不能在现场环境下工作吗？再见，谢谢
offset: $(window).height()