Javascript 滚动以延迟页面转换效果

我正在做一个看起来像叠卡片的页面转换。当你向下滚动时，下面的卡片就会显示出来。但是，向后滚动查看以前的卡片是令人讨厌的，我不知道为什么。快速向上滚动时，过渡效果似乎被中断

有关工作示例，请参见此处：

$（窗口）.on（'beforeunload'，function（））{
$（窗口）.scrollTop（0）；
});
$（函数（）{
var-trueHeight=0；
$（'section'）。每个（函数（）{
trueHeight+=$（this.outerHeight（）；
var scrollHeight=trueHeight-$（this）.outerHeight（）；
$（此）.data（'offset'，scrollHeight）；
});
$（'body，html'）.css（{height:trueHeight+“px”}）；
$（窗口）。滚动（函数（）{
var scrollTop=$（窗口）.scrollTop（）；
$（'section'）。每个（函数（）{
var off=$（this.data（'offset'）；
如果（滚动顶部>关闭）{
var translate=（滚动顶部关闭）/$（窗口）.height（）*100；
$（this.css（{transform:'translateY（'+-translate+'%）'））}）；
}
});
});
});
/*欢迎来到Compass。
*在这个文件中，您应该编写您的主要样式。（或集中导入）
*使用以下HTML或等效文件导入此文件：
*  */
html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体：继承；
字体大小：100%；
垂直对齐：基线；}
html{
线条高度：1；}
ol，ul{
列表样式：无；}
桌子{
边界塌陷：塌陷；
边框间距：0；}
标题，th，td{
文本对齐：左对齐；
字体大小：正常；
垂直对齐：中间；}
q、 大宗报价{
引号：无；}
q:before，q:after，blockquote:before，blockquote:after{
内容：“；
内容：无；}
img{
边框：无；}
文章、旁白、详细信息、图表、页脚、页眉、H组、主菜单、菜单、导航、章节、摘要{
显示：block；}
html{
框大小：边框框；}
*，*：：之后，*：：之前{
框大小：继承；}
html，正文{
保证金：0；
位置：相对；}
p{
位置：绝对位置；
顶部：50px；
左：100px；
字体系列：“Helvetica Neue”，“Helvetica”，“Roboto”，“Arial”，无衬线；
字号：22.652px；
z-索引：999；}
h1{
利润率最高：48%；
文本对齐：居中；
字体系列：“Helvetica Neue”，“Helvetica”，“Roboto”，“Arial”，无衬线；
字体大小：22.652px；}
.复制{
浮动：左；
显示：块；
保证金权利：2.35765%；
宽度：65.88078%；
左边距：34.11922%；}
复制：最后一个孩子{
右边距：0；}
.集装箱{
位置：固定；
宽度：100%；
高度：100vh；
溢出：隐藏；}
部分{
宽度：100%；
位置：绝对位置；
排名：0；
身高：735px；
长方体阴影：0px 3px 5px 0px rgba（0,0,0,0.15）；}
#英雄{
背景：#bada55；
z-索引：99；}
#项目1{
背景#54d9d5；
z-索引：98；}
#项目2{
背景#e49012；
z-索引：97；}
#项目3{
背景#545fd9；
z-索引：96；}
#项目4{
背景：#e312cb；
z-索引：95；}
#项目5{
背景：#d95454；
z-索引：94；}
#项目6{
背景#e3dd12；
z索引：93；}

你好
你好
你好
你好
你好
你好
你好
window.jQuery | | document.write（“”）
事实证明，这确实起到了作用：

    $('section').each(function() {
        var off = $(this).data('offset');
        if (scrollTop > off) {
            var translate = (off - scrollTop) / $(window).height() * 100;
            $(this).css({transform: 'translateY(' + translate +'%)'});
        }
        else {
            $(this).css({transform: 'translateY(' + 0 + '%)'});
        }
    });

添加else语句解决了我的问题。没有它，
的人不知道什么时候停止翻译。数学是这样的，如果用户快速滚动，var translate实际上永远不会达到零
 请补充几句，说明这有什么帮助。