How do I optimize this Javascript function?

Question

I have a procedure so that my top nav has a different style if the user is scrolled near the top of the page or farther down from:

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

The problem is that I realize this is efficient because class of navbar-default is being added or removed a small number of times with respect to the number of times that onscroll is invoked. I also realized that I need to change an image in the nav depending on whether or not scrolling is happening, so I would then have essentially

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

which is even more ridiculous. How can I fumigate this room full of code smell?

@Pointy I mean how do I reduce the average number of operations — , Aug 13 '15 at 17:28
No the question is both why and how. `.addClass()` probably checks `hasClass()` first, so as not to rewrite HTML, so that shouldn't be an issue. As for the second point, use CSS rather than an img tag. — Popnoodles, Aug 13 '15 at 17:42

score 0 · Answer 1 · edited May 23 '17 at 12:29

Here are some suggestions:

Place your curly braces on the same line as the function or you may run into situational problems with automatic semi colon insertion - Example
Use a sprite for the image instead - Tutorial
Toggle the class

Use css to change the toggle between images instead of changing the img source based on the class of the 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;
}

More advanced possibilities:

(I don't personally know if this boosts performance but you could try it)

Poll at a small interval (100ms) to check for the position of the scroll bar as opposed to checking every single time someone scrolls and then toggle the class
This will be less quick/responsive but will be more consistent (worst case: toggle the class every 100ms)

How do I optimize this Javascript function?

1 Answers1