jQuery视差效应和滞后

我有一个带有标题和内容的页面。 当向下滚动时，标题菜单会停留在顶部，而内容有一种“视差”效果（它的上移速度比标题快，这正是我所需要的）

我的小jQuery脚本对于“视差”效果很好，但是当向下滚动达到最大值时，内容开始结巴/滞后。 该脚本似乎一直试图不断地将内容向上移动（至少用一个苹果魔法鼠标），这造成了这种不愉快的副作用

我怎样才能防止呢

PS：为了清楚地显示口吃问题，我在JSFIDLE中夸大了视差效果

PPS：确保测试时有一个可滚动的页面（浏览器高度较小），否则，效果和问题当然不会发生

//粘性标题菜单
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>92）{
如果（！$（'.fixed'）。长度）{
$（'.menu'）.addClass（'fixed'）；
}
}否则{
如果（$（'.fixed'）.length）{
$（'.menu'）.removeClass（'fixed'）；
}
}
});
//卷轴上内容的视差
var iCurScrollPos=0；
$（窗口）。滚动（函数（）{
iCurScrollPos=$（this.scrollTop（）；
$（'.content'）.css（'margin-top'，-iCurScrollPos*1.2+'px'））
});
正文{
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
背景：#ccc；
}
标题{
位置：相对位置；
宽度：100%；
背景：#fff；
z指数：1；
高度：146px；
}
.无效{
位置：相对位置；
宽度：100%；
高度：100px；
}
.菜单{
位置：相对位置；
宽度：100%；
高度：54px；
背景：#aaa；
}
.固定{
位置：固定；
左：0px；
顶部：0px；
}
img{
宽度：100%
}
您可以使用滚动位置的历史记录，通过比较最后两个位置是否与第三个和第四个位置相同来确定是否发生了口吃效应：

$(window).scroll(function() {
    if ($(document).scrollTop() > 92){
            if (!$('.fixed').length){$('.menu').addClass('fixed');}
        } 
        else {
              if ($('.fixed').length){$('.menu').removeClass('fixed');}                    
    }     
});

// Parallax of page on scroll

var iCurScrollPos = 0;
// Contains the last 4 scroll positons.
var lastPositions = [];

$(window).scroll(function () {
    iCurScrollPos = $(this).scrollTop();

    lastPositions.push(iCurScrollPos);
    // Control over when locaties are marked as duplicates. Use it to fine tune the response.
    var duplicateRange = 20;

    // The stutter bug can be caught be checking if two last locations are the same as the 3rd and 4th.
     if(Math.abs(lastPositions[0] - lastPositions[2]) < duplicateRange && Math.abs(lastPositions[1] - lastPositions[3]) < duplicateRange){
      lastPositions = [];
       return;
    }

      console.log(lastPositions);
    if(lastPositions.length === 4){
      lastPositions = [];
    }



   $('.content').css('margin-top',-iCurScrollPos*1.2+'px')
});

$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>92）{
if（！$（'.fixed'）.length）{$（'.menu'）.addClass（'fixed'）；}
} 
否则{
if（$（'.fixed'）.length）{$（'.menu'）.removeClass（'fixed'）；}
}     
});
//滚动页面的视差
var iCurScrollPos=0；
//包含最后4个滚动位置。
var lastPositions=[]；
$（窗口）。滚动（函数（）{
iCurScrollPos=$（this.scrollTop（）；
最后位置。推（iCurScrollPos）；
//控制位置标记为重复位置的时间。使用它微调响应。
var重复范围=20；
//通过检查最后两个位置是否与第三个和第四个位置相同，可以捕获口吃错误。
if（Math.abs（lastPositions[0]-lastPositions[2]）

jsIDLE:
您可以使用滚动位置的历史记录，通过比较最后两个位置是否与第三个和第四个位置相同来确定是否发生了口吃效应：

$(window).scroll(function() {
    if ($(document).scrollTop() > 92){
            if (!$('.fixed').length){$('.menu').addClass('fixed');}
        } 
        else {
              if ($('.fixed').length){$('.menu').removeClass('fixed');}                    
    }     
});

// Parallax of page on scroll

var iCurScrollPos = 0;
// Contains the last 4 scroll positons.
var lastPositions = [];

$(window).scroll(function () {
    iCurScrollPos = $(this).scrollTop();

    lastPositions.push(iCurScrollPos);
    // Control over when locaties are marked as duplicates. Use it to fine tune the response.
    var duplicateRange = 20;

    // The stutter bug can be caught be checking if two last locations are the same as the 3rd and 4th.
     if(Math.abs(lastPositions[0] - lastPositions[2]) < duplicateRange && Math.abs(lastPositions[1] - lastPositions[3]) < duplicateRange){
      lastPositions = [];
       return;
    }

      console.log(lastPositions);
    if(lastPositions.length === 4){
      lastPositions = [];
    }



   $('.content').css('margin-top',-iCurScrollPos*1.2+'px')
});

$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>92）{
if（！$（'.fixed'）.length）{$（'.menu'）.addClass（'fixed'）；}
} 
否则{
if（$（'.fixed'）.length）{$（'.menu'）.removeClass（'fixed'）；}
}     
});
//滚动页面的视差
var iCurScrollPos=0；
//包含最后4个滚动位置。
var lastPositions=[]；
$（窗口）。滚动（函数（）{
iCurScrollPos=$（this.scrollTop（）；
最后位置。推（iCurScrollPos）；
//控制位置标记为重复位置的时间。使用它微调响应。
var重复范围=20；
//通过检查最后两个位置是否与第三个和第四个位置相同，可以捕获口吃错误。
if（Math.abs（lastPositions[0]-lastPositions[2]）

JSFIDLE:

身体{
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
背景：#ccc；
}
标题{
位置：相对位置；
宽度：100%；
背景：#fff；
z指数：1；
高度：146px；
}
.无效{
位置：相对位置；
宽度：100%；
高度：100px；
}
.菜单{
位置：相对位置；
宽度：100%；
高度：54px；
背景：#aaa；
}
.固定{
位置：固定；
左：0px；
顶部：0px；
}
img{
宽度：100%
}
//粘性标题菜单
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>92）{
if（！$（'.fixed'）.length）{$（'.menu'）.addClass（'fixed'）；}
}否则{
if（$（'.fixed'）.length）{$（'.menu'）.removeClass（'fixed'）；}
}     
});
//滚动页面的视差
var iCurScrollPos=0；
$（窗口）。滚动（函数（）{
log（iCurScrollPos，iCurScrollPos-screen.height，$（window.height（））；
var max_sc=iCurScrollPos-屏幕高度；
iCurScrollPos=$（this.scrollTop（）；
如果（iCurScrollPos<最大值）
$（'.content'）.css（'margin-top'，-iCurScrollPos*1.2+'px'））
});

在文档末尾时，必须停止滚动事件

要计算页面结尾iCurScrollPos-screen.height

找到相同的JSFIDLE链接。

身体{
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
背景：#ccc；
}
标题{
位置：相对位置；
宽度：100%；
背景：#fff；
z指数：1；
高度：146px；
}
.无效{
位置：相对位置；
宽度：100%；
高度：100px；
}
.菜单{
职位：相对人
 html{
     scroll-behavior:smooth;
   }