Question

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

如果侧边栏滚动到最后，侧边栏会停止滚动。
此外，如果侧栏会滚动到视图之外，侧栏中会选择列表项。

我的代码是使用jQuery用Javascript编写的。不幸的是，在我的页面上滚动现在已经滞后了。以下是指向demo page（右键单击 - ＆gt;显示源代码）及其javascript file的链接。

如何加快代码（并且仍然是抽象的）？

我将这里的javascript代码粘贴给那些不想关注链接的人。

HTML :(示例）

<ul id="right">
    <li><h3>Headline</h3></li>
    <li><a>Item</a></li>
    <li><a>Item</a></li>
    <li><a class="selected">Active Item</a></li>
    <li><a>Item</a></li>
    <li><h3>Headline</h3></li>
    <li><a>Item</a></li>
    <li><a>Item</a></li>
</ul>

使用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();
});

Answer 1

我只是看看你的链接，并认为滞后不是因为你的javascript 。如果您不这么认为尝试禁用window.scroll事件中的所有脚本，还是会滞后吗？

现在尝试删除所有阴影属性 - box-shadow和text-shadow。还记得在simple.js中禁用更改阴影不透明度（在滚动事件期间更改阴影总是滞后）。

现在你可以看到它运行得非常快!!!返回css文件并启用每个阴影属性并找出最适合您的内容。

Answer 2

有一种更快，更简单的方法来获得你想要的效果。

尝试这样做：当窗口向下滚动足够远时，将侧边栏的css position属性设置为fixed。向上滚动时，将侧边栏的position设置回relative。

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';
    }
}

你可以看到它在这里工作 - http://jsfiddle.net/cL4Dy/

加快我的Javascript滚动事件代码

2 个答案: