JavaScript滚动当前视图的元素ID

Question

如果已经询问/回答了这个问题，请道歉。我有一个html页面（这个页面有JQuery库），有很多段落标记。每个段落（p）标记与具有名称的锚标记相关联。请注意这些段落中的内容可能有所不同。当用户滚动页面时，如何在当前视图中获取锚标记的名称？

的

的

<p><a name="para1"></a> some long text </p> 
<p><a name="para2"></a> some text </p> 
<p><a name="para3"></a> some long text </p>

的

Answer 1

你可以使用

$(document).ready(function(){
    $(window).on('scroll',function(){
        var Wscroll = $(this).scrollTop();
        $('a[name^="para"]').each(function(){
            var ThisOffset = $(this).closest('p').offset();
            if(Wscroll > ThisOffset.top &&  Wscroll < ThisOffset.top  + $(this).closest('p').outerHeight(true)){
                $(this).closest('p').css('background','red');
                console.log($(this).attr('id')); // will return undefined if this anchor not has an Id
                // to get parent <p> id
                console.log($(this).closest('p').attr('id')); // will return the parent <p> id
            }
        });
    });
});

Demo

注意：不要忘记包含Jquery

要解释：$(this)在.each()内选择名称以para ... closest('p')开头的锚点，以选择此锚点的父<p> ..所以请在此处玩你想要的东西