jQuery：如何改进这个被触发次数太多的滚动事件？

这段代码可以工作并完成任务，但它非常糟糕+初级，并且在滚动事件方面存在一些问题。有人能帮我优化滚动事件吗

原型：

结构和预期行为：

• 有两个容器，

  .layout\uu left

  （红色）和

  .layout\uu right

  （绿色）
• 绿色容器将具有主要内容，并将正常滚动
• 红色容器将具有导航功能，因此它的内容将更少，并且应该只向上滚动到某个点，直到菜单到达页面的边框

这就是我正在做的：

首先，两个容器都正常滚动

当向下滚动红色容器时，如果滚动位置+窗口大小大于li:last child位置（无论如何都无法想到检测“底部”），则容器的位置是固定的

向上滚动时，将禁用固定位置，当菜单到达文档顶部时，该位置将再次固定，然后删除

正如我所说的，这很管用。但它的速度很慢，滚动时会出现故障。我想这是因为我正在做滚动事件，它在每个像素中执行

我尝试限制函数调用，但代码根本不起作用：

    $(window).on('scroll', function() {
    $.throttle(100, sectionScroll));
    });

    sectionScroll = function() {
    var lastScrollTop = 0, delta = 5;
    var left = $('.layout__left');
    var right = $('.layout__right');
    var scroll = $(this).scrollTop();
    var viewport = $(window).height();
    var lastChild = $('.navigation > ul > li:last-child').offset().top;

    if(Math.abs(lastScrollTop - scroll) <= delta)
    return;

    if (scroll > lastScrollTop){
    // SCROLL DOWN
    left.removeClass('top absolute');

    // if the last item of the left is visible
    if (  (scroll + viewport) > (lastChild + 30)  ) {
    // make the left fixed
    left.addClass('fixed bottom');
    console.log("bottom!");
    }

    // SCROLL UP
    } else {
    // remove fixed class from left
    left.removeClass('fixed bottom');
    left.addClass('absolute bottom');

    if ( scroll <= left.position().top   ) {
    left.removeClass('bottom absolute');
    left.addClass('top fixed');
    left.removeClass('top fixed');
    console.log("top!");
    }
    }

    lastScrollTop = scroll;
    };

$（窗口）.on（'scroll'，function（）{
$。节流阀（100，部分滚动）；
});
sectionScroll=函数（）{
var lastScrollTop=0，delta=5；
var left=$（'.layout__left'）；
var right=$（'.layout__right'）；
var scroll=$（this.scrollTop（）；
var viewport=$（窗口）.height（）；
var lastChild=$（'.navigation>ul>li:lastChild'）.offset（）.top；
if（Math.abs（lastScrollTop-scroll）lastScrollTop）{
//向下滚动
left.removeClass（'top absolute'）；
//如果左侧的最后一项可见
如果（（滚动+视口）>（lastChild+30））{
//把左边固定住
左.addClass（'固定底部'）；
console.log（“底部！”）；
}
//向上滚动
}否则{
//从左侧移除固定类
左。removeClass（“固定底部”）；
左。addClass（“绝对底部”）；
如果（滚动一种方法是将其放在脚本中的某个位置：

var isStarted = false;

然后，在开始函数中：

if(!isStarted) {
    isStarted = true;
//other stuff
} else {
    return false; //because it's already doing it's thing
}

在停止功能中：

isStarted = false;

您的代码笔代码与本文中的代码不匹配。至少在您发布的代码中，您正在运行$.throttle（100，sectionScroll））；每次xy坐标中甚至有一个像素的变化。这将运行很多次，甚至可能会重复。这可能会有所帮助？