Question

I have a function that does something like this:

function my_function() {
  if ($('#footer').outerHeight() > 100) {
  $('#footer').height(...) ;
  $('#footer').css(....) ;
}

That function is called everytime I scroll, so I wonder if it’s that bad to do this $(‘#footer’) so many times. If so, what would be a good way to solve this?

Answer 1

You should chain your functions and cache your selector like so:

function my_function() {
  var footer = $('#footer');
  if (footer.outerHeight() > 100) {
      footer.height(...).css(....);
  }
}

You could even move the var footer = $('#footer'); outside of the function making it global to further improve it.