javascript - 当元素位于屏幕顶部时向元素添加类

Question

我正在尝试向屏幕顶部的元素添加类，这些元素是通过单击父 DIV 内的按钮或在输入表单中输入文本来 append 的。

它有效，但不适用于 append 元素。当它确实适用于 append 元素时，就像每次 append 这些元素时这些元素的偏移量一样，然后它将该类应用于之后的每个 append 元素。这很烦人，我已经被这个问题困扰了至少一周了。

当元素到达屏幕顶部时我用来添加类的代码是这样的:

window.poo = function poo() {
     $("#message").each(function() {


var win = $(".chat-log"),
  nav = $(this),

  pos = nav.offset().top,
  sticky = function() {

    win.scrollTop() > pos ?
       nav.addClass('inactive') :
      nav.removeClass('inactive')
  }

win.scroll(sticky);
});

}

poo();

元素的父元素是#message，#message的父元素是.chat-log。我已将 #message 更改为 .message，但它仍然给了我相同的结果。

当用户单击父级中的按钮时，偏移量每次都会变得更糟，并且在所有元素到达屏幕顶部之前，该类就会应用于所有元素。

Answer 1

$(".chat-log").on("scroll", function() {  
    console.log("I'm scrolling!");

    var win = $(this);  // .chat-log
    win.find(".message").each(function(){

        var nav = $(this);  // each .message found

        //console.log("win: "+win.scrollTop());
        console.log("nav: "+nav.offset().top);

        nav.offset().top < 0 ? nav.addClass('inactive') : nav.removeClass('inactive')
    });
});