Javascript/Jquery在窗口中查找最上面的段落

Javascript/Jquery在窗口中查找最上面的段落,javascript,jquery,html,css,Javascript,Jquery,Html,Css,谁能告诉我一种方法,在HTML文档中查找浏览器窗口中可见的第一段。表示我希望第一段不是在文档内(可能大于窗口区域),而是在浏览器窗口内(可见屏幕) *p.S除了获取文档中的所有“p”元素并遍历以找到第一个可见元素之外*我认为这就是您想要的: $("p:visible:first") 这应该起作用: $(document).ready(function(){ var paragraphs = $('p'); var scrollTop = $(window).scrollTop(

谁能告诉我一种方法,在HTML文档中查找浏览器窗口中可见的第一段。表示我希望第一段不是在文档内(可能大于窗口区域),而是在浏览器窗口内(可见屏幕)


*p.S除了获取文档中的所有“p”元素并遍历以找到第一个可见元素之外*

我认为这就是您想要的:

$("p:visible:first")
这应该起作用:

$(document).ready(function(){
    var paragraphs = $('p');
    var scrollTop = $(window).scrollTop();
    var scrollBtm = scrollTop + $(window).height();
    paragraphs.each(function(e){
        var top = $(this).offset().top;
        if (top > scrollTop && top < scrollBtm){
            alert("Win");
            return false;
        }
    });
});
$(文档).ready(函数(){
var段落=$('p');
var scrollTop=$(窗口).scrollTop();
var scrollBtm=scrollTop+$(窗口).height();
段落.每项职能(e){
var top=$(this).offset().top;
如果(顶部>滚动顶部&顶部<滚动BTM){
警惕(“胜利”);
返回false;
}
});
});
编辑:我意识到这是在遍历p标记,但至少使用“return false”,您不会遍历每个标记,只是当前视图上方的每个标记


编辑2:在文档上创建一个段落数组。准备好了吗?

有一个jQuery插件用于此,您可以尝试一下:

您可以想出某种机制,根据p标记的偏移量来标记它们。因此,当页面加载时,您必须循环通过p标记(或者更好的部分),并根据它们的偏移位置对它们进行标记。然后将用户的当前滚动位置与最近的偏移量p进行比较就很简单了。

我怀疑,如果不遍历所有
p
标记,这是不可能的。有一个[how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport][1]:谢谢,看看它是否有用!!如果我理解正确,他希望在当前可见区域中获得第一个
p
,而不是整个文档。在jQuery上,他们提到“可见元素的宽度或高度大于零”。但在查看端口显示区域内没有任何可见内容。感谢帮助!但随着用户向下滚动越来越多,这将需要更多的时间,因此在大尺寸的html文档中不会做得更好。如果您正在寻找离屏幕顶部最近的p标记,这是我认为您唯一的选择。但是,如果您正在滚动浏览文章、博客条目等,并且希望突出显示其中一个中最上面的p标记,则可以将其向下分割为div或section标记,以增加搜索时间。要使脚本更高效,我可以想到的第一件事是在加载文档时获取一次段落的jQuery对象,而不是每次都要检查(修改了我上面的代码)。除此之外,您还可以在开始时使用jQuery数据功能将偏移顶部坐标附加到每个段落,尽管这些坐标可能会根据您的页面而变化。我看到的唯一其他替代方法是每次用户滚动时检查屏幕顶部的段落,但我不建议这样做,因为我假设您要检查顶部段落的次数可能比用户向下滚动页面的次数少得多。是的,我已将内容划分为多个部分,然后应用jquery.filter(函数(){//(当前滚动<段落高度)检查})要过滤特定部分中的段落,然后从中选择“第一”,每次用户从第一部分向上/向下滚动时,都会更改当前部分。这减少了大量的比较。