粘贴标题并将选项卡设置为活动|Jquery时出现滚动问题

我开发了一个页面，一旦页面滚动，它就有一个固定的菜单，而且选项卡在相应的节id上也会变为活动的。

我几乎已经完成了功能，但我面临一些问题：

1. 滚动是不合适的，它没有停在容器的确切位置。示例：如果我滚动到section3，一旦section3容器命中，选项卡就会被选中，但我需要滚动一点才能选中选项卡
2. 一旦我点击选项卡，页面就会被冻结，无法在页面上进行任何滚动，也无法选择任何其他选项卡

我看过很多demo，也尝试过，但没能实现。据我所知，我做了这个演示。请帮我修改当前我做错的代码。

这就是我尝试过的。

演示链接

HTML:

<div class="top_layer">Top Layer</div>
<div class='menu'>
  <ul>
    <li><a href="#basic1">basic 1</a></li>
    <li><a href="#basic2">basic 2</a></li>
    <li><a href="#basic3">basic 3</a></li>
    <li><a href="#basic4">basic 4</a></li>
  </ul>
</div>
<div id="basic1" class="section">basic 1</div>
<div id="basic2" class="section">basic 2</div>
<div id="basic3" class="section">basic 3</div>
<div id="basic4" class="section">basic 4</div>

JS:

var menuSection = $('.section') , navLists = $('.menu ul li'),
            navLists_height = navLists.outerHeight(), headerOffset = $('.top_layer').offset().top;
        $(window).on('scroll', function () {
            var window_top = $(window).scrollTop() + 12;
            if (window_top > headerOffset) {
                $('.menu').addClass('fixed');
            } else {
                $('.menu').removeClass('fixed');
            }
            var cur_position = $(this).scrollTop();
            menuSection.each(function() {
                var top = $(this).offset().top - navLists_height,
                    bottom = top + $(this).outerHeight();
                if (cur_position >= top && cur_position <= bottom) {
                    navLists.find('a').removeClass('active');
                    menuSection.removeClass('active');
                  $(this).addClass('active');
                  navLists.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
                }
            });
            navLists.find('a').on('click', function () {
                  var $el = $(this)
                    , id = $el.attr('href');
                  $('html, body').animate({
                    scrollTop: $(id).offset().top - navLists_height
                  }, 500);
                  return false;
            });
        });