Question

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

我非常深入到这个项目并且无法真正重新开始，我已经完成了大部分工作但是当用户在页面上滚动并且菜单中的锚标记随之变化时，无法完成任何工作

是否有一个简单的解决方案使用最新的jquery和javascript，并与？

重合

或者我将不得不重新开始这个项目？

以下是我所拥有的一些代码：

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

Answer 2

试试这个，

$(function(){
    $(window).scroll(function () {
        var windscroll = $(window).scrollTop();
        $('ul li a').each(function(i) {
            var posTop = $($(this).attr('href')).position().top, 
                h = $($(this).attr('href')).height();

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

注意：正确应用 CSS 。

<强> Live Demo

使用id和名称滚动时，活动锚标记会更改

2 个答案: