加速我的Javascript滚动事件代码

我在Web应用程序的侧栏中添加了一些特殊功能。您可以在my上看到用户界面的概念。（关于右侧边栏）

如果侧边栏滚动到其末端，则侧边栏将停止滚动

此外，侧边栏中还有一些选定的列表项，如果它们要从视图中滚动出去，它们将停留在侧边栏的顶部或底部

我的代码是使用jQuery用Javascript编写的。不幸的是，现在在我的页面上滚动是滞后的。以下是指向我的（右键单击->显示源代码）及其应用程序的链接

如何加快代码的速度（而且还是抽象的）？

我将javascript代码粘贴到这里是为了那些不想关注这些链接的人

HTML：（示例）

标题
项目
项目
活动项
项目
标题
项目
项目

Javascript:

var Scrollers = $('#content,#left,#right');
var Scrollable = new Array(Scrollers.length);
var TopOffset = new Array(Scrollers.length);
var BottomOffset = new Array(Scrollers.length);
var OuterHeight = new Array(Scrollers.length);
var OuterHeightAndOffsets = new Array(Scrollers.length);
function ScrollInit(){

    Scrollers.each(function(i){

        // constants
        TopOffset[i] = parseInt($(this).css("margin-top").replace("px",""));
        BottomOffset[i] = parseInt($(this).css("margin-bottom").replace("px",""));
        OuterHeight[i] = parseInt($(this).outerHeight());
        OuterHeightAndOffsets[i] = TopOffset[i] + BottomOffset[i] + OuterHeight[i];

        // classes
        $(this).removeClass('snapped top bottom');

        if(OuterHeightAndOffsets[i] < $(window).height()){
            $(this).addClass('snapped top');
            Scrollable[i] = false;
        } else {
            Scrollable[i] = true;
        }
    });
}
ScrollInit();


var SelectedListitems = $('li.selected');
var SelectedListitemsActive = new Array(SelectedListitems.length); for(var i=SelectedListitems.length; i<0; i++) SelectedListitemsActive[i] = false;
function ScrollCalc(){

    // list item locking
    SelectedListitems.each(function(i){
        if(!($(this).parent().hasClass('snapped top'))){
            var ListItemOffset = $(this).offset().top - $(window).scrollTop();
            var ListItemState=0; // 0:in, 1:above, 2:under
            if(ListItemOffset <= $(this).parent().offset().top){ ListItemState=1; }
            else if(ListItemOffset + $(this).outerHeight() >= $(window).height()){ ListItemState=2; }

            // no snapped clone so far
            if(ListItemState){
                if(SelectedListitemsActive[i]!=true && !$(this).parent().hasClass('snapped')){
                    var AppendClasses = 'clone snapped '; if(ListItemState == 1) AppendClasses += 'top '; else AppendClasses += 'bottom ';
                    $(this).parent().append($(this).clone().addClass(AppendClasses + i));
                    SelectedListitemsActive[i] = true;
                }
            // already snapped, clone existing
            } else {
                if(SelectedListitemsActive[i]==true){
                    $('.clone.snapped.' + i).remove();
                    SelectedListitemsActive[i] = false;
                }
            }
        }
    });

    // scroll container locking
    Scrollers.each(function(i){
        if(Scrollable[i]){
            if($(window).scrollTop()+$(window).height() > OuterHeightAndOffsets[i]){
                $(this).addClass('snapped bottom');
            } else {
                $(this).removeClass('snapped bottom');
            }
        }
    });

    ScrollEvent = false;
}
ScrollCalc();

$(window).scroll(function(){
    ScrollCalc();
});

var Scrollers=$（'#content，#left，#right'）；
var Scrollable=新数组（Scrollers.length）；
var TopOffset=新数组（Scrollers.length）；
var BottomOffset=新数组（Scrollers.length）；
var OuterHeight=新数组（Scrollers.length）；
var outerheightandoffset=新数组（Scrollers.length）；
函数ScrollInit（）{
滚动条。每个（功能（i）{
//常数
TopOffset[i]=parseInt（$（this）.css（“页边空白顶部”）.replace（“px”，即“）；
BottomOffset[i]=parseInt（$（this）.css（“页边距底部”）.replace（“px”，”）；
OuterHeight[i]=parseInt（$（this.OuterHeight（））；
OuterHeight和Offset[i]=地形偏移[i]+底部偏移[i]+OuterHeight[i]；
//班级
$（this.removeClass（'snapted top-bottom'）；
if（outerHeightandOffset[i]<$（window.height（））{
$（this.addClass（'snaped top'）；
可滚动[i]=错误；
}否则{
可滚动[i]=真；
}
});
}
ScrollInit（）；
var SelectedListitems=$（'li.selected'）；
var SelectedListitemsActive=新数组（SelectedListitems.length）；对于（var i=SelectedListitems.length；i outerHeightandOffset[i]）{
$（this.addClass（'snaptedbottom'）；
}否则{
$（this.removeClass（'snaptedbottom'）；
}
}
});
ScrollEvent=false；
}
ScrollCalc（）；
$（窗口）。滚动（函数（）{
ScrollCalc（）；
});

有一种更快、更简单的方法来获得您想要的效果

尝试以下操作：当窗口向下滚动足够远时，将侧栏的css

位置

属性设置为

固定

。向上滚动时，将侧边栏的

位置设置回
相对位置


var sidebar=document.getElementById（'side'），
部分

sidebar.style.position='relative'；
sidebar.style.bottom='0px'；
sidebar.style.right='0px'

window.onscroll = function(){
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
        maxTop = section ? section.offsetTop : sidebar.offsetHeight - window.innerHeight;
    sidebar.style.top = sidebar.style.bottom = null;
    if (scrollTop > maxTop) {
        if (section) {
            sidebar.style.top = - section.offsetTop + 'px';
        } else {
            sidebar.style.bottom = '0px';
        }
        sidebar.style.position = 'fixed';
    } else {
        sidebar.style.position = 'relative';
    }
}


你可以看到它在这里工作-
我刚刚查看了你的链接，相信的滞后并不是因为你的javascript。如果您不这么认为，请尝试禁用window.scroll事件中的所有脚本，是否仍然滞后

现在尝试删除所有阴影属性-框阴影和文本阴影。还记得在simple.js中禁用更改阴影不透明度（在滚动事件期间更改阴影始终为laggy）

现在你可以看到它跑得很快！！！返回css文件并启用每个阴影属性，找出最适合您的属性。
锁定侧边栏只是第一个功能。你的小提琴对我不起作用，但我的解决办法几乎是一样的。而不是编辑属性，我添加了类（
捕捉底部
）。请查看我的JS代码中的块
//滚动容器锁定
。添加/删除类可能需要很多时间？我编辑代码以在更多浏览器中工作；）我将在一分钟内看一看第二部分。@sharethis好的，编辑以说明所选的辅助项（单击标题以选择它们）谢谢，您的小提琴现在对我有用（第一部分），而且速度非常快。我认为更改单个属性比切换css类要快。我只想保存选定的条目，而不想保存孔边栏。此外，如果条目从底部看不见，它也不起作用。在您的右侧，它非常平滑，没有
框阴影。顺便说一句，在simple.js中仅更改阴影不透明度并不是很慢。谢谢！
window.onscroll = function(){
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
        maxTop = section ? section.offsetTop : sidebar.offsetHeight - window.innerHeight;
    sidebar.style.top = sidebar.style.bottom = null;
    if (scrollTop > maxTop) {
        if (section) {
            sidebar.style.top = - section.offsetTop + 'px';
        } else {
            sidebar.style.bottom = '0px';
        }
        sidebar.style.position = 'fixed';
    } else {
        sidebar.style.position = 'relative';
    }
}