How to check div visible or not on screen by class name while scrolling?

Question

Like check below "demo div"

<div class="call" style="margin-top:100px;">
   hi
</div>
<div class="call" style="margin-top:900px;">
  hello
</div>

If any above div on screen return true using class name,while scrolling I'm use below script which is always return me to true,how to fix it?

<script>
jQuery.expr.filters.offscreen = function(el) {
return (
      (el.offsetLeft + el.offsetWidth) < 0 
      || (el.offsetTop + el.offsetHeight) < 0
      || (el.offsetLeft > window.innerWidth || el.offsetTop > window.innerHeight)
 );
};

$(window).scroll(function () {
alert($('.call').is(':offscreen'))
});
</script>

you might want to look at this : http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport — krishwader, Jun 22 '13 at 07:21
hey, How to tell if a DOM element is visible in the current viewport? this is not similar question I WANT DO THIS WITH CLASS NAME NOT ANY ELEMENT pleas read twice my question @passionateCoder — Wiram Rathod, Jun 22 '13 at 07:25
An element does have a class doesnt it? I didnt say can use this soln verbatim just like that, no one can write it for you. You'd have to tweak it for your needs @wiramrathod. — krishwader, Jun 22 '13 at 07:30
ok, I agree but my Question is not Duplicate @passionateCoder — Wiram Rathod, Jun 22 '13 at 07:32
@wiramrathod i didnt say it was a duplicate. i was just helping u get a good soln. — krishwader, Jun 22 '13 at 07:33
@passionateCoder Check I add more effort for Question adding code which I try.. — Wiram Rathod, Jun 22 '13 at 07:48

score 0 · Answer 1 · answered Jun 22 '13 at 09:42

try this

$(document).scroll(function () {
                if (isOnScreen($('.call:eq(0)'))) {
                    // $('.call:eq(0)') is visible on screen
                }

            });

    //this function return element is currently visible on screen or not in true / false
            function isOnScreen(elem) {
                var docViewTop = $(window).scrollTop();
                var docViewBottom = docViewTop + $(window).height();

                var elemTop = $(elem).offset().top;
                var elemBottom = elemTop + $(elem).height();

                return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
            }

for demo

<div class="call" style="margin-top: 100px;">
    hi
</div>
<label class="label1" style="margin-top: 500px;">
</label>
<label class="label2" style="margin-top: 20px;">
</label>
<div class="call" style="margin-top: 500px;">
    hello
</div>
   <script type="text/javascript">
        $(document).scroll(function () {
            if (isOnScreen($('.call:eq(0)'))) {
                $('.label1').text('first div show') // if first call class div is visible msg display in lable
            }
            else {
                $('.label1').text('first div hide')
            }
            if (isOnScreen($('.call:eq(1)'))) {
                $('.label2').text('second div show')// if second call class div is visible msg display in lable
            }
            else {
                $('.label2').text('second div hide')
            }

        });
        function isOnScreen(elem) {
            var docViewTop = $(window).scrollTop();
            var docViewBottom = docViewTop + $(window).height();

            var elemTop = $(elem).offset().top;
            var elemBottom = elemTop + $(elem).height();

            return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
        }
    </script>

How to check div visible or not on screen by class name while scrolling?

1 Answers1