Question

我正在添加和删除活动锚链接的类（颜色：红色）。问题是根据章节没有一致地添加类，我似乎没有想出这个。

我如何修改我的代码，因为锚链接在其各自的部分始终位于页面顶部时会“高亮”？

这是我的代码：

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

滚动/单击时未在固定导航上正确设置活动锚链接

1 个答案: