javascript - 落后的 JavaScript - 优化或更便宜的功能的机会

Question

我有这段代码，它完全符合我的要求。菜单栏位于顶部，可以识别它所在的部分。您可以单击黄色菜单中的链接在各部分之间移动。

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

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

  $(函数(){

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

  });

但是，一旦您开始将任何内容放入框中，代码本身就会变得非常滞后。想知道有没有机会优化一下代码，让它运行起来更流畅一些。

Answer 1

您遇到的问题是您重复更改页面布局属性(通过动画)和查询页面布局属性(在滚动处理程序中)，从而触发大量 forced layouts .

如果我正确理解您的代码，您可以通过在单击动画期间禁用滚动处理程序并在不进行检查的情况下触发效果(在单击的元素上设置事件类)来获得很大的改进。