javascript - 事件 anchor 链接在滚动/单击时未在固定导航上正确设置

Question

我正在添加和删除事件 anchor 链接的类(颜色:红色)。问题是类(class)没有根据部分一致地添加，我似乎没有弄清楚这一点。

当相应的部分始终位于页面顶部时，如何修改我的代码，使 anchor 链接“突出显示”？

这是我的代码:

    // for secondary nav
 var topRange      = 200,  // measure from the top of the viewport to X pixels down
     edgeMargin    = 20,   // margin above the top or margin from the end of the page
     contentTop = [];

 // Set up content an array of locations for secondary nav
 $('.overlay-box').find('a').each(function(){
    var href = $(this).attr('href');
    var name = href.substr(href.lastIndexOf('#')+1);
    contentTop.push( $('[name="' + name + '"]').offset().top );
 });

// adjust secondary nav on scroll
$(window).scroll(function(){
  var winTop = $(window).scrollTop(),
      bodyHt = $(document).height(),
      vpHt = $(window).height() + edgeMargin;  // viewport height + margin
  $.each( contentTop, function(i,loc){
   if ( ( loc > winTop - edgeMargin && ( loc < winTop + topRange || ( winTop + vpHt ) >= bodyHt ) ) ){
    $('.nav-bar li')
     .removeClass('anchor-selected')
     .eq(i).addClass('anchor-selected');
   }
  });
});

这是网站:

http://www.icontrol.com/what-we-do/platform-services/

Answer 1

我看不出你是怎么做到的。

我整理了一个 jsfiddle 来实现你想要做的事情

希望它是你需要的:-)

http://jsfiddle.net/66ZbB/

$(document).ready(function() {
$('a').click(function() {
    $('a').removeClass('anchor-selected');
    var obj = $(this);
    $('html, body').animate({
        scrollTop: obj.offset().top
    }, 1000, function () {
        obj.addClass('anchor-selected');
    });
});
$(window).scroll(function() {
    $('a').removeClass('anchor-selected');
    //alert($(window).scrollTop() +":");
    $('a').each(function() {
        console.log($(this).offset.top);
        if (($(window).scrollTop() <= ($(this).offset().top)) && ($(window).scrollTop() > ($(this).offset().top - 20))) {
            $(this).addClass('anchor-selected');
        }
    });
});
});