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

【问题标题】：Scrolling issue while sticking header and setting the tab active | Jquery粘贴标题并将选项卡设置为活动时出现滚动问题 | jQuery
【发布时间】：2015-12-18 12:05:35
【问题描述】：

我开发了一个页面，一旦页面滚动，它就有一个固定的菜单，并且选项卡将在其相应的部分 id 上变为活动状态。

我几乎完成了功能，但我遇到了一些问题：

滚动不合适，并且没有在容器的确切位置停止。示例：如果我滚动到第 3 节，一旦第 3 节容器命中，标签应该会被选中，但我需要滚动一点才能选中标签。
单击选项卡后，页面会冻结，无法在页面上进行任何滚动，也无法选择任何其他选项卡。

我看过很多演示并尝试但未能实施。据我所知，我做了这个演示。请帮我解决我做错的当前代码更改。

这是我尝试过的。

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我已经更新了代码，检查fiddle，你的导航列表选择锚点应该在窗口滚动之外。

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

【讨论】：