javascript - 使用 id 和名称在滚动时更改事件 anchor 标记

Question

如标题所述，我在尝试弄清楚如何让它发挥作用时遇到了问题。我知道有几个这样的例子，但它们不适用于我正在做的事情或我拥有的代码。

我对这个元素已经很深入了，无法真正重新开始，我已经完成了其中的大部分工作，但是当用户在页面上滚动并且菜单中的 anchor 标记随之更改时，无法进行任何工作。

是否有使用最新的 jquery 和 javascript 的简单解决方案与 and 重合？

或者我真的必须重新开始这个元素吗？

这里有一些关于我所拥有的代码:

<nav id="menu" class="menu">
                <a class="menu-trigger"></a>
                <ul>
                <li><a href="#">:: Join Community ::</a></li>
                <li><a href="#home_wrapper" class="active">Home</a></li>
                <li><a href="#about_wrapper">About</a></li>
                <li><a href="#advertise_wrapper">Advertise</a></li>
                <li><a href="#central_wrapper">GP Central</a></li>
                <li><a href="#contact_wrapper">Contact</a></li>
                <li><a href="#career_wrapper">Career</a></li>
                <li><a href="#press_wrapper">Press</a></li>
                <li><a href="#">:: My Dashboard ::</a></li>
            </ul>
            </nav>


<div id="main_body">

            <div id="about_wrapper">
            </div>

            <div class="clear"></div>

            <div id="advertise_wrapper">
            </div>

            <div class="clear"></div>

            <div id="central_wrapper">
            </div>

            <div class="clear"></div>

            <div id="contact_wrapper">
            </div>

            <div class="clear"></div>

            <div id="career_wrapper">
            </div>

            <div class="clear"></div>

            <div id="press_wrapper">
            </div>

        </div>

我试过这个:

$(window).scroll(function() {
var windscroll = $(window).scrollTop();
$('.page').each(function(i) {
    var posTop = $(this).position().top, 
        h = $(this).height();

    if (posTop  <= windscroll && posTop + h > windscroll ) {
        $('.menu ul li').removeClass('active');
        $('.menu ul li').eq(i).addClass('active');
    }
});
});

如有任何帮助，我们将不胜感激!

Answer 1

终于在4dgaurav的帮助下找到了答案!

var sections = $('div')
  , nav = $('.menu')
  , nav_height = nav.outerHeight();

$(window).on('scroll', function () {
  var cur_pos = $(this).scrollTop();

  sections.each(function() {
    var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();

    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('active');
      sections.removeClass('active');

      $(this).addClass('active');
      nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
    }
  });
});

nav.find('a').on('click', function () {
  var $el = $(this)
    , id = $el.attr('href');

  $('html, body').animate({
    scrollTop: $(id).offset().top - nav_height
  }, 500);

  return false;
});