js 优化——当鼠标滚动scrollTop()大于某个值时，显示顶部的固定导航，需要频繁触发js计算，如何优化？

页面打开不滚动时如下：

目前我知道的做法仅限于此：

$(function() {
    $(window).scroll(function() {
        var scrollHeight = $(document).scrollTop();
        if (scrollHeight > 60 px) {
            $('#targetBar').addClass('lighted');
        } else {
            $('#targetBar').removeClass('lighted');
        }
    });
})

CSS部分如下：

.lighted {position:fixed;top:0px;transition:all .5s;box-shadow......}

这种设计还是挺好的，百度搜索结果也在用，问题是：

只要有鼠标滚动就会触发该js并计算是不是符合条件，从网页优化的角度来说肯定不是很好的解决方案，有没有熟悉这个功能的朋友，帮忙指点下，有没有更好的解决方案？

谢谢