Scrolling issue while sticking header and setting the tab active | Jquery

Question

I have developed a page, which has a fixed menu once the page is scrolled and also the tabs will become active on their appropriate section id's.

I have almost completed the functionality but I am facing some problems :

1. Scrolling is not appropriate and it is not stopping at the exact position of the container. Example : If i scroll to section3, the tab should get select once the section3 container hits, but I need to scroll a little bit to get the tab selected.
2. Once I click on the tab, then the page is getting freezed unable to do any scroll on the page neither able to select any other tab.

i have seen lot of demo's and tried but failed to implement. as per my knowledge i did this demo. Please help me out with the current code change where I have done wrong.

this is what I tried.

demo Link

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

Answer 1

I have update the code , check fiddle , your navlist selecting anchors should be outsideof window scroll.

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() + 70;//70 for fixed header height
    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;
});