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

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 within prototype , not possible? how can create 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()?

javascript jquery html css