Question

我有这个代码，它完全按照我的意愿工作。菜单栏位于顶部并识别其所在的部分。您可以单击黄色菜单中的链接在各部分之间移动。

http://jsfiddle.net/spadez/2atkZ/9/

http://jsfiddle.net/spadez/2atkZ/9/embedded/result/

$（function（）{

var $select = $('#select');
var $window = $(window);
var isFixed = false;
var init = $select.length ? $select.offset().top : 0;

$window.scroll(function () {
    var currentScrollTop = $window.scrollTop();
    if (currentScrollTop > init && isFixed === false) {
        isFixed = true;
        $select.css({
            top: 0,
            position: 'fixed'
        });
        $('body').css('padding-top', $select.height());
    } else if (currentScrollTop <= init) {
        isFixed = false;
        $select.css('position', 'relative');
        $('#select span').removeClass('active');
        $('body').css('padding-top', 0);
    } 


    //active state in menu
    $('.section').each(function(){
        var eleDistance = $(this).offset().top;
        if (currentScrollTop >= eleDistance-$select.outerHeight()) {
            var makeActive = $(this).attr('id');
            $('#select span').removeClass('active');
            $('#select span.' + makeActive).addClass('active');
        }
    });
});

$(".nav").click(function (e) {
    var divId = $(this).data('sec');
    $('body').animate({
        scrollTop: $(divId).offset().top - $select.height()
    }, 500);
});

}）;

但是，只要您开始在框中添加任何内容，代码本身就会变得非常迟缓。我想知道是否有机会优化代码并让它运行得更顺畅。

Answer 1

您遇到的问题是您反复更改页面布局属性（通过动画）和查询页面布局属性（在滚动处理程序中），从而触发大量forced layouts。

如果我正确理解你的代码，你可以通过在点击动画期间禁用滚动处理程序而不是在没有检查的情况下触发效果（在点击的元素上设置活动类）来获得很大的改进。

滞后JavaScript - 优化或更便宜功能的机会

1 个答案: