Question

我已准备好此代码以滚动到<a name tag>。这一切都很好，但我的问题是：如果我要滚动到新消息，而不是使用链接，我可以让jQuery在Go To链接中添加active类吗？

HTML

<a href="#about">Go To</a><li>
<a name="about">New Message</a>

JQUERY

$(function() {
    $('a[href^=#]').click(function(e) {
        var name = $(this).attr('href').substr(1);
        var pos = $('a[name=' + name + ']').offset();
        $('body').animate({
            scrollTop: pos.top
        });
        e.preventDefault();
    });
});

Answer 1

您可以使用这个简单的Jquery插件http://imakewebthings.com/jquery-waypoints/

然后你可以写

$('[name = 'about']').waypoint(function(){
$('[href = '#about']').addClass('active');
});

我没有测试过，但它是基本的想法。

Answer 2

我建议：

jQuery(window).scroll(function(e){
    jQuery("a[name]").removeClass("visible");
    jQuery("a[name]").each(function(index, item){
      var pos = jQuery(this).offset();
      if(pos.top > jQuery(window).scrollTop()
         && pos.top < jQuery(window).scrollTop() + jQuery(window).height()){
        // My anchor is in the viewport, let's add it a class.
        jQuery(this).addClass("visible");
      }
    });
});

编辑：我的回答不正确。我编辑了它并为你做了一支笔：http://codepen.io/anon/pen/twDek

Jquery addClass在名称滚动位置

2 个答案: