Javascript 检查未看到的帖子并更新标题

我需要检查用户是否看到了帖子，并根据他没有看到的帖子数量更改文档标题

例如，标题有两个未看到的帖子：“（2）-帖子123”，或没有未看到的帖子：“（帖子123）”

我已经研究了几个“滚动到视图”jQuery插件，但是我还没有找到一个好的、快速的解决方案来处理ajaxed内容（帖子被附加到一个div中，它每5秒钟检查一次新内容）

例如，这就是降价：

<div id="posts">
 <div class="reply" data-postid="1" data-seen="no">
 Post 1
 </div>
 <div class="reply" data-postid="2" data-seen="no">
 Post 2
 </div>
 <div class="reply" data-postid="3" data-seen="no">
 Post 3
 </div>
</div>

更新的工作代码（用于旁路）：

函数lescroll（）{
var amount=“0”；
$（'.reply[data seen=“no”]'）。每个（函数（）{
金额++；
如果（IsCrolledinToView（本））{
$（this.attr（“看到的数据”，“是”）；
金额--；
};
});
document.title=“（“+金额+”）pagetitle”；
如果（金额=0）{
document.title=“>>-vikingchan”；
}
setTimeout（lescroll，5000）；/*在另一个选项卡中检查它*/
}
$（窗口）。滚动（函数（）{
莱斯克罗尔（）；
});
$（文档）.ready（函数（）{
莱斯克罗尔（）；
}); 

要使代码针对所有元素运行，请将滚动回调更改为

$(window).scroll(function(){
    $('.reply[data-seen="no"]').each(function(){
        if ( isScrolledIntoView(this) ) {
            $(this).attr("data-seen", "yes");
        };
    });
});

但请记住，它可能有点沉重，因为滚动时会多次触发scroll。你可能想试试。

试试看

$(window).on("scroll", function (e) {
    var title = function() {
    document.title = $("[data-seen=yes]").length === $(".reply").length
                     ? "Post#123" 
                     : "(" + $("[data-seen=no]").length + ")" + " - Post#123";
        return document.title
    };
    // console.log(document.title);
    $(".reply").each(function (i, el) {
        if (el.getBoundingClientRect().top <= window.innerHeight) {
            el.dataset.seen = "yes";
            title();
        } else {
            el.dataset.seen = "no";
            title();
        };
    });
    try {
      if (window.innerHeight + window.scrollY >= 
         Number($("[data-seen=yes]").css("height").replace(/px/, ""))) {

          $("[data-seen=yes]").next().data("seen", "yes");
          title();
          // console.log($("[data-seen=no]").length
          //               , $("[data-seen=yes]").length)
      }
    } catch (e) {
      console.log(e)
    };

}).trigger("scroll");

$（窗口）。打开（“滚动”，功能（e）{
var title=函数（）{
document.title=$（“[看到的数据=是]”）。长度===$（“.reply”）。长度
“职位#123”
：“（“+$”（“[data seen=no]”。length+”）”+“-Post#123”；
返回文档名称
};
//console.log（document.title）；
$（“.reply”）。每个（函数（i，el）{
如果（el.getBoundingClientRect（）.top=
编号（$（“[data seen=yes]”）。css（“高度”）。替换（/px/，“”）{
$（“[data seen=yes]”。下一步（）.data（“seen”，“yes”）；
title（）；
//console.log（$（“[data seen=no]”）。长度
//，$（“[看到的数据=是]”）。长度）
}
}捕获（e）{
控制台日志（e）
};
}).触发（“滚动”）；

---

jshiddle

最简单的解决方案是利用那些“滚动到视图中”的内容jQuery插件..@TJ我发现的插件没有一个能按我所希望的方式工作。如果视图中有一个唯一的对象，它们可能会返回true，但我无法让它在每个

.post

上工作。所以你希望我们为你编写一个适合你需要的插件吗？我发现：@TJ不，我希望得到帮助，就像这个网站一样我试着像这样更改标题，但由于某种原因，该值总是错误的：

if（$（'.reply[data seen=“no]”）.length>1{document.title=“”（+$（.reply[data seen=“no]”）size（）+”）.oldtitle”}

通过inspect元素我看到没有

[data seen=“no]”

，但出于某种原因，标题说“（2）oldtitle“您在哪里调用代码来更改标题？您是否有一个链接，我们可以在其中看到它的操作？@odin您的标题更改代码有一个

if

，如果未看到的标题少于2个，则不允许更改标题。

if（$（'.reply[data seen=“no”]）。长度>1）

您应该删除此项。当您向后滚动时，此项会再次累加？不确定“当您向后滚动时，此项会再次累加”是什么意思？如果解释正确，则在

滚动时会删除此项—“向下”或“向上”，
document.title
已更改，请参阅jsfiddle上的
控制台
。Thanks我的意思是，当我向上滚动时，标题会更改回1、2、3等等。脚本的要点是检查他是否看到了它。当看到所有
后，可以添加一个操作/函数来“做事情”。回复
帖子。或者，调用
$（window）.off（“scroll”）
-在这种情况下，如果附加了任何其他
scroll
事件，则可能会将
名称空间添加到
scroll
事件中；例如，
$（window）.on（“scroll.seen”）
，当全部看到时，
$（window）.off（“scroll.seen”）
。
$(window).scroll(function(){
    $('.reply[data-seen="no"]').each(function(){
        if ( isScrolledIntoView(this) ) {
            $(this).attr("data-seen", "yes");
        };
    });
});

$(window).on("scroll", function (e) {
    var title = function() {
    document.title = $("[data-seen=yes]").length === $(".reply").length
                     ? "Post#123" 
                     : "(" + $("[data-seen=no]").length + ")" + " - Post#123";
        return document.title
    };
    // console.log(document.title);
    $(".reply").each(function (i, el) {
        if (el.getBoundingClientRect().top <= window.innerHeight) {
            el.dataset.seen = "yes";
            title();
        } else {
            el.dataset.seen = "no";
            title();
        };
    });
    try {
      if (window.innerHeight + window.scrollY >= 
         Number($("[data-seen=yes]").css("height").replace(/px/, ""))) {

          $("[data-seen=yes]").next().data("seen", "yes");
          title();
          // console.log($("[data-seen=no]").length
          //               , $("[data-seen=yes]").length)
      }
    } catch (e) {
      console.log(e)
    };

}).trigger("scroll");