jQuery addClass example

Change class name on click in jQuery

by Kunal Virk

HTML

<section class="section" style="background-color:green;">
    Top Layer
</section>

<section class="video-section section" style="background-color:red;">
    <div class="mask">
      MASK
    </div>            
</section>

<section class="section" style="background-color:green;">
    a
</section>

<section class="section" style="background-color:blue;">
    b
</section>

CSS

html, body {height:100%; width:100%;}
section {height: 100%;}

JavaScript

$(window).on('scroll', function (e) {
    if ($(this).scrollTop() > 0 && $('.mask').hasClass('remove-mask')) {
    		$('.mask').removeClass('remove-mask');	  
        } else if ($(this).scrollTop() > 0 && $('.mask').hasClass('remove-mask')) {
            $('.mask').addClass('remove-mask');
        }
    }
});