我如何优化这个Javascript函数

Question

我有一个程序，如果用户滚动到页面顶部附近或较低的位置，我的顶部导航会有不同的样式:

/* Handle the changing of the top nav on page scroll */
window.onscroll = function ()
{
    if ($(window).scrollTop() > 150) // 150 pixels from top triggers scrolling
    {
        $('.navbar-default').addClass('scrolling');
    }
    else
    {
        $('.navbar-default').removeClass('scrolling');
    }
};

问题是我意识到这是有效的，因为相对于onscroll被调用的次数，navbar-default的class被添加或删除的次数很少。我还意识到，我需要根据滚动是否发生来改变导航栏中的图像，因此，我基本上会有

/* Handle the changing of the top nav on page scroll */
window.onscroll = function ()
{
    if ($(window).scrollTop() > 150) // 150 pixels from top triggers scrolling
    {
        $('.navbar-default').addClass('scrolling');
        $('.navbar-default .navvar-brand img').attr('src','image1.jpg');
    }
    else
    {
        $('.navbar-default').removeClass('scrolling');
        $('.navbar-default .navvar-brand img').attr('src','image2.jpg');
    }
};

更荒谬。我要怎么熏蒸这个充满代码味的房间?

Answer 1

以下是一些建议:

• 将花括号与函数放在同一行，否则您可能会遇到自动插入分号的情景问题-示例
• 使用精灵代替图像-教程
• 切换类

• 使用css来改变图像之间的切换，而不是基于nav-default的类来改变图像源

  // Something like this...
  .nav-default {
    background-image: url('spriteimage.jpg');
    background-repeat: no-repeat;
    height: // height of first image here;
    background-position: // position of first image here;
  }
  .nav-default.scrolling {
    height: // height of second image here;
    background-position: // position of second image here;
  }
  

更高级的可能性:

(我个人不知道这是否会提高性能，但你可以试试)

• 以小间隔(100ms)轮询来检查滚动条的位置，而不是每次有人滚动时都检查，然后切换类
• 这将不那么快速/响应，但将更加一致(最坏的情况:每100毫秒切换一次类)