탭메뉴 클릭시 해당 영역으로 이동, 스크롤 영역별 탭메뉴 클래스 제어, 탭메뉴 영역이후 스크롤시 상단에 탭 고정

<div class="tab-wrap">
    <ul>
        <li class="active"><a href="#">탭1</a></li> <!-- 활성화시 active 추가 -->
        <li><a href="javascript:;">탭2</a></li>
        <li><a href="javascript:;">탭3</a></li>
    </ul>
</div>

<div class="tab-cont-wrap">
    <div class="tab-cont"></div>
    <div class="tab-cont"></div>
    <div class="tab-cont"></div>
</div>

<script>

(function($) {
    $(document).ready(function() {
        var $tab = $('.tab-wrap');
        var $menu = $('.tab-wrap li');
        var $tabCont = $('.tab-cont');

        $(window).on('scroll',function(){
            //탭메뉴 영역 이후 스크롤시 탭고정
            var $scrTop = $(window).scrollTop();
            var $tabOffsetTop = $tab.offset().top;

            if($scrTop>=$tabOffsetTop){
                $tab.addClass('fixed');
                }else{
                    $tab.removeClass('fixed');
                }

            //영역별 탭메뉴 active
            $.each($tabCont, function(idx, item){
                    var $target   = $tabCont.eq(idx),
                               i         = $target.index(),
                         targetTop = $target.offset().top;

                if (targetTop <= $scrTop) {
                    $menu.removeClass('active');
                    $menu.eq(idx).addClass('active');
                    }
                })
            });

        //탭메뉴 클릭시 해당 영역으로 스크롤 이동
        $('.tab-wrap li a').on('click',function(){
            var $tabIdx = $(this).parent().index();
            var $tabCont = $('.tab-cont');
            $('html,body').animate({scrollTop:$tabCont.eq($tabIdx).offset().top +1}, 500); //탭메뉴 클릭시 스크롤을 한번이라도 내려야 해당 탭에 active가 돼서 offset top에 +1을 해줌 = 탭 클릭만 해도 탭메뉴에 불들어옴
        });
    });
})(jQuery);

</script>