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

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

/* 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

以下是一些建议：

将花括号放在与功能相同的行上，否则可能会遇到自动半结肠插入的情境问题 - Example
使用精灵代替图片 - Tutorial
切换课程

使用css更改图片之间的切换，而不是根据nav-default

的类更改img源

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

更高级的可能性：

（我个人不知道这是否会提升效果，但你可以尝试一下）

以小间隔（100毫秒）轮询以检查滚动条的位置，而不是检查每个人滚动然后切换班级
这样会更快/响应更快但更一致（最糟糕的情况：每隔100毫秒切换一次）

如何优化此Javascript函数？

1 个答案: