Javascript 在滚动时添加粘性

我有一个条纹图案：

html:

<div class='resize' style='background-color:black;'></div>
<div class='resize' style='background-color:red;'></div>
<div class='resize' style='background-color:green;'></div>
<div class='resize' style='background-color:blue;'></div>
<div class='resize' style='background-color:grey;'></div>

下面是一个JSFIDLE：

我想在用户到达新条带时添加滚动粘性，这样当用户滚动时，他们不会很快进入。条纹需要稍微贴在屏幕顶部

下面是我想做的一个例子：

我真的不明白我怎么能创造这种粘性效果

---

非常感谢你的帮助

阅读链接到的应用程序的源代码。答案就在这里：特别是在页眉中的script标记中，有一个

callbackScroll（）

函数处理页面的移动。这很简单。在提出要求之前，试着自己实施。特别是当你链接到答案时，Jason是100%正确的

$(function() {
    $('.resize').css({
        'height': (($(window).height()))
    });

    $(window).resize(function() {
        $('.resize').css({
            'height': (($(window).height()))
        });
    });
});

$(window).height();