javascript - Using prototype with scrollTop to make instances of a Class(js class) active (css class) -

i think title pretty confused, dont know how named i'm trying do.

i have paragraph:

<p data-initial="100" data-final="1000">test</p> 

note data-*

and paragraph have simple css:

p {   color: black;   margin-top: 500px; } p.active {   color: red; } 

and paragraph instance of animation class:

+ function($) {   var animation = function(element) {     this.element = $(element);     this.initial = this.element.data('initial');     this.final = this.element.data('final');      if (this.initial > $(this).scrolltop()) {       this.applyanimation();     }   }    animation.prototype.applyanimation = function() {     alert('worked!!');     this.element.addclass('active');   }    animation.prototype.disableanimation = function() {     this.element.removeclass('active');   }    $(window).on('load', function() {     $('[data-initial]').each(function() {       var animation = $(this);       animation = new animation(this);     });   });   }(jquery); 

with code, i'm trying apply .active class in paragraph if page scroll more them 100, not working @ all, not happens.

i think maybe it's because i'm trying 'hear' scroll inside prototype , not possible? how can make instance hear scroll , apply class when page scroll on 100 ??

if this:

  $(window).scroll(function() {     if ($(this).scrolltop() > 100) {       console.log('test');     }   }); 

the test appear in console, so, window.scroll code not wrong.

i think line might cause problem:

if (this.initial > $(this).scrolltop()) { 

"this" new instance of animation isn't element. maybe should this.element.scrolltop()?