Add class on html element when it gets visible on screen

Ilyas karim

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.

Kurenai Kunai

Try visible selector as in :

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to add a class to an element when another element gets a class in angular?

From Dev

jQuery add css class only when last child element is visible

From Dev

onScroll add class to div by visible on screen

From Dev

Best practice for when element is visible on the screen?

From Dev

Add transition effect when an element become visible?

From Dev

Add class to html element when PHP condition is met

From Dev

How to add a class when visible in browser window

From Dev

Add class when element is created

From Dev

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

From Dev

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

From Dev

Make boxes stack when the screen gets to small (CSS/HTML)

From Dev

Add class to html depending on screen size

From Dev

Add class to html depending on screen size

From Dev

remove class and add class when an element is clicked

From Dev

WPF determine element is visible on screen

From Dev

when Video element is full screen the custom controls just gets blocked be the full screen video

From Dev

How to add a class to each TD in a TR when the TR gets selected

From Dev

Add class on visible elements

From Dev

Tab gets displayed in next line with visible class

From Dev

How to add CSS class dynamically to html element

From Dev

Add a calculated class to an HTML element in angular

From Dev

How to add class to html element with Deface?

From Dev

OM how to add class to html element

From Dev

How to add html class to above element

From Dev

How to add a class to parent element when there are several

From Dev

Add class when element reaches top of viewport

From Dev

Add and remove class when element clicked with Angular

From Dev

Want to add a CSS class to an element when it is clicked

From Dev

Jquery Add class when element is in view

Related Related

  1. 1

    How to add a class to an element when another element gets a class in angular?

  2. 2

    jQuery add css class only when last child element is visible

  3. 3

    onScroll add class to div by visible on screen

  4. 4

    Best practice for when element is visible on the screen?

  5. 5

    Add transition effect when an element become visible?

  6. 6

    Add class to html element when PHP condition is met

  7. 7

    How to add a class when visible in browser window

  8. 8

    Add class when element is created

  9. 9

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

  10. 10

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

  11. 11

    Make boxes stack when the screen gets to small (CSS/HTML)

  12. 12

    Add class to html depending on screen size

  13. 13

    Add class to html depending on screen size

  14. 14

    remove class and add class when an element is clicked

  15. 15

    WPF determine element is visible on screen

  16. 16

    when Video element is full screen the custom controls just gets blocked be the full screen video

  17. 17

    How to add a class to each TD in a TR when the TR gets selected

  18. 18

    Add class on visible elements

  19. 19

    Tab gets displayed in next line with visible class

  20. 20

    How to add CSS class dynamically to html element

  21. 21

    Add a calculated class to an HTML element in angular

  22. 22

    How to add class to html element with Deface?

  23. 23

    OM how to add class to html element

  24. 24

    How to add html class to above element

  25. 25

    How to add a class to parent element when there are several

  26. 26

    Add class when element reaches top of viewport

  27. 27

    Add and remove class when element clicked with Angular

  28. 28

    Want to add a CSS class to an element when it is clicked

  29. 29

    Jquery Add class when element is in view

HotTag

Archive