如何优化js代码

Question

如何优化我的JS代码：

$(window).scroll(function() { 
    if ($('#sec1').isVisible()) { 
     $('.js-nav a.m1').addClass('active'); 
    } else { 
     $('.js-nav a.m1').removeClass('active'); 
    } 

    // ... 

    if ($('#sec5').isVisible()) { 
     $('.js-nav a.m5').addClass('active'); 
    } else { 
     $('.js-nav a.m5').removeClass('active'); 
    } 
}); 

http://jsfiddle.net/Kwiatkowski/qx8jodzx/

DIV有指一个菜单项

<div id="sec1" class="box-fh test1" data-menu="m1"> 
    <h1>box1</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam diam orci, lobortis ut accumsan non, semper ut purus. Quisque ut blandit elit. Integer pulvinar dolor sit amet dictum auctor. Morbi sed felis et velit fringilla convallis. Nullam feugiat lectus id ultrices gravida. Fusce fringilla et dolor in egestas. Cras pretium euismod mauris, id luctus turpis dapibus at. Cras fringilla elit erat, vel dictum odio bibendum et.</p> 
    <div class="js-nav section-nav"> 
     <a class="next" href="#sec2">box2</a> 
    </div> <!-- .section-nav --> 
</div> 

Answer 1

可以使用each环中的属性按类来检查所有可见的元素。
获取id并将其拆分得到号码并切换等效元素active class。
我把它放到switchClass函数，并在滚动动画完成后执行。

$('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && 
     location.hostname == this.hostname) { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 

    if (target.length) { 
     $('html,body').animate({ 
     scrollTop: target.offset().top - 0 
     }, 1000, switchClass); 

     return false; 
    } 
    } 
}); 

$.fn.isVisible = function() { 
    var windowScrollTopView = $(window).scrollTop(); 
    var windowBottomView = windowScrollTopView + $(window).height(); 
    var elemTop = $(this).offset().top; 
    var elemBottom = elemTop + $(this).height(); 

    return ((elemBottom <= windowBottomView) && (elemTop >= windowScrollTopView)); 
} 


function switchClass() { 
    $('.box-fh').each(function() { 
    var nr = this.id.split('sec')[1]; 

     if($(this).isVisible()) { 
      $('.js-nav a.m' + nr).addClass('active'); 
     } else { 
      $('.js-nav a.m' + nr).removeClass('active'); 
     } 
    }); 
}