Adding Class to Element when it's at the Top of the Screen

Question

I am trying to add class to elements that hit the top of the screen that have been appended either by clicking a button inside a parent DIV or by entering text within the input form.

It works, but not for the appended elements. And when it does work for the appended elements, it's like the offset of those elements get off each time they get appended and then it applies the class to every appended element after that. It's annoying and I've been stuck on this for at least a week now.

The code I am using to add class when the element hit the top of the screen is this:

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();

The elements parent is #message and the #message's parent is .chat-log. I have changed #message to .message but it still gave me the same result.

And when the user clicks the buttons within the parents, the offset gets worse each time and the class is applied to all elements before they even hit the top of the screen.

Check here, maybe you'll find : http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Louys Patrice Bessette, Jun 26 '16 at 18:31

Louys Patrice Bessette · Accepted Answer · 2016-06-26T20:02:42.673

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')
    });
});

edited Jun 26 '16 at 20:02

answered Jun 26 '16 at 18:52

Louys Patrice Bessette

33,375
6
36
64

I did it but it's not applying for dynamic elements. :( – YVLL Jun 26 '16 at 18:59
And like this... ?? – Louys Patrice Bessette Jun 26 '16 at 19:14
I tried using .on("scroll") many times and it doesn't work at all. Could there be anything that is interfering with the code? It's like 3,000+ lines of code lol so it's going to be tough to single it out. – YVLL Jun 26 '16 at 19:24
I've looked at the view-source more colsely... look at my new edit. I'm not sure it works, but it's getting closer. I added a console.log .. Just to be sure we're on the right scroll event... As a begining. ;) – Louys Patrice Bessette Jun 26 '16 at 19:32
Yes! It's getting closer. I updated the site. It's applying the class before the elements reach the top of the screen. Each appended element gets a class way before then. – YVLL Jun 26 '16 at 19:36
Yes... I see your `.bitch` class. (lol!) Is this what you wanted ? – Louys Patrice Bessette Jun 26 '16 at 19:39
lmaooo oops. I got mad so thats just me getting putting things like that. And it's whatever you want to name it. – YVLL Jun 26 '16 at 19:44
The thing is that you have to attach the event on an existing element... So in this case, to reach the dynamically appended, I used .find() from this existing element... And that's it. – Louys Patrice Bessette Jun 26 '16 at 19:47
Ok I see... Element gets the bitch class too soon...Hold on – Louys Patrice Bessette Jun 26 '16 at 19:51
So should I detach them from the other element or just use find()? I am using it but the class still gets added before they reach the top. Hmmm. At least it's adding it. – YVLL Jun 26 '16 at 19:51
I added to new console logs... so you will see what is compared in your condition – Louys Patrice Bessette Jun 26 '16 at 19:54
I added the new code. Sorry for asking dumb questions, but what does a console log do? I'm learning and you're helping a lot. Does it tell you the problems with a certain code? – YVLL Jun 26 '16 at 19:56
Hit F-12 on your keyboard. console.log prints message in the console. It's helpfull to debug. – Louys Patrice Bessette Jun 26 '16 at 19:59
1

Thank you so muchhhhhh. It works now. You're amazing. Now I won't have to use the `bitch` class. Lmaoooo. – YVLL Jun 26 '16 at 20:08
Cool... You can play with the value to compare... Something like `nav.offset().top < 50` will show a couple black lines. Please, accept the answer (green check mark). ;) – Louys Patrice Bessette Jun 26 '16 at 20:11
1

If I ever need help again, I'm coming to you. Thanks :-) – YVLL Jun 26 '16 at 20:13

score 0 · Answer 2 · answered Jun 26 '16 at 18:34

Seems you are trying to attach a function to every .chat-log div, so it executes on scroll. The problem is when this executes, there is only one such div, so only it will change its class when passing the top.

You have to change the function so the for each is inside the function that is executed on every scroll. You could for example attach it to the window, and inside it you search to which divs the style should be applied.

Adding Class to Element when it's at the Top of the Screen

2 Answers2