Add class on html element when it gets visible on screen

Question

I want to add class to the element when it gets visible on screen when scrolling:

<button class='btn btn-default' >
   Hello
</button>

I want to add class to 'btn-default' when the button gets visible on screen after scrolling or when page reloads.

Answer 1

Try visible selector as in :

$(window).on('scroll', function(){
    if ($(".btn").is(':visible')){
        $(".btn").addClass("btn-default");
    }
});