Lagging JavaScript - Opportunity for optimization or less expensive functions

Question

I have this code and it works exactly as I want. The menu bar sits on top and recognizes the section it is on or in. You can click the links in the yellow menu to move between the sections.

• http://jsfiddle.net/spadez/2atkZ/9/

• http://jsfiddle.net/spadez/2atkZ/9/embedded/result/

  $(function () {

  var $select = $('#select');
  var $window = $(window);
  var isFixed = false;
  var init = $select.length ? $select.offset().top : 0;
  
  $window.scroll(function () {
      var currentScrollTop = $window.scrollTop();
      if (currentScrollTop > init && isFixed === false) {
          isFixed = true;
          $select.css({
              top: 0,
              position: 'fixed'
          });
          $('body').css('padding-top', $select.height());
      } else if (currentScrollTop <= init) {
          isFixed = false;
          $select.css('position', 'relative');
          $('#select span').removeClass('active');
          $('body').css('padding-top', 0);
      } 
  
  
      //active state in menu
      $('.section').each(function(){
          var eleDistance = $(this).offset().top;
          if (currentScrollTop >= eleDistance-$select.outerHeight()) {
              var makeActive = $(this).attr('id');
              $('#select span').removeClass('active');
              $('#select span.' + makeActive).addClass('active');
          }
      });
  });
  
  $(".nav").click(function (e) {
      var divId = $(this).data('sec');
      $('body').animate({
          scrollTop: $(divId).offset().top - $select.height()
      }, 500);
  });
  

  });

However, the code itself gets quite laggy as soon as you start putting any content in the boxes. I wondered if there is any opportunity to optimize the code and make it run a bit smoother.

Answer 1

The problem you have is that you're repeatedly changing page layout properties (via the animation) and querying page layout properties (in the scroll handler), thus triggering a large number of forced layouts.

If i understand your code correctly you could get a big improvement by disabling the scroll handler during the click animation and instead triggering the effects with no checks made (set the active class on the clicked element).