javascript - 粘贴标题并将选项卡设置为事件状态时出现滚动问题 | jQuery

Question

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

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

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

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

这是我尝试过的。

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

我已经更新了代码，查看fiddle ，您的导航列表选择 anchor 应该位于窗口滚动之外。

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