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.

I mean when the button gets visible on screen through scrolling or when page reloads — Ilyas karim, Dec 14 '15 at 06:45
What is the sense? Why do you need this? Provide the usage example. — Yeldar Kurmangaliyev, Dec 14 '15 at 06:46
You can use `onscroll` and `onload` events to achieve this.. — Rayon, Dec 14 '15 at 06:47
@RayonDabre Yeah. I do not say that there is no sense. I just want to know why the OP wants to do this. Probably, in his case, it can be achieved in other way. — Yeldar Kurmangaliyev, Dec 14 '15 at 06:47
@RayonDabre I think you have used the wow jquery plugin. when we scroll down the page the selected 'div' animates. Same i want to add class to btn when it gets visible on screen after scrolling. — Ilyas karim, Dec 14 '15 at 06:48
You can use ".load(function(){}" . Load event is sent to an element when the element itself and all the sub-elements have been loaded. Something like this: $(".btn").load(function(){ $(this).addClass("btn-default"); }); — Kurenai Kunai, Dec 14 '15 at 06:53
If you have control over the function which decides it's visibility then just add a callback to that function. Take a look at this post http://stackoverflow.com/questions/1462138/js-event-listener-for-when-element-becomes-visible — 11thdimension, Dec 14 '15 at 06:54

score 8 · Accepted Answer · edited Oct 04 '19 at 06:28

8

Try visible selector as in :

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

edited Oct 04 '19 at 06:28

Ilyas karim

4,592
4
33
47

answered Dec 14 '15 at 07:02

Kurenai Kunai

1,842
2
12
22

I modified my answer as per @Ravimallya. I initially didnt use "on scroll" as the question did not say that the person needed the element to be visible on scroll. :) – Kurenai Kunai Dec 14 '15 at 07:13
OP didn't add it in question, but in comment he mentioned. So added my own answer. – Ravimallya Dec 14 '15 at 07:17

Ravimallya · Answer 2 · 2015-12-14T07:58:09.217

You've to use jquery $(element).is(':visible') to check whether an element is visible in an HTML document.

JSFiddle

This is the snippet where it will add a class when document ready and when scrolled to the element.

$(function() {
  if ($('#testElement').is(':visible')) {
    $('#testElement').addClass('red');
  }
});
$(window).on('scroll', function() {
  var $elem = $('#testElement1');
  var $window = $(window);

  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window.height();
  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();
  if (elemBottom < docViewBottom) {
    alert('hi')
    $('#testElement1').addClass('red');
  }
});

.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="testElement" class="btn btn-default">
  Hello
</button>
<div style="height:400px">Some content</div>
<button id="testElement1" class="btn btn-default">
  Hi
</button>

Digpal Singh · Answer 3 · 2015-12-14T12:35:07.803

-6

Normally you can add and remove class below code but first you add(include) any jquery min js

Add class: $('.Yourclassname').addClass('addclassname'); 

Remove Class: $('.Yourclassname').removeClass('removeclassname');

edited Dec 14 '15 at 12:35

answered Dec 14 '15 at 10:02

Digpal Singh

166
1
5

Add class on html element when it gets visible on screen

3 Answers3