Extend jQuery to create custom filter re element outside viewport

Question

Found this SO great question/answer re extending jQuery to determine if an element is off screen:

How to check if an element is off-screen

Also found this article, but could not use to resolve problem:

http://code.tutsplus.com/tutorials/dissecting-jquery-filters--net-13954

---

Using scurker's (accepted answer) code, this should alert (and hide element) when yellow DIV scrolls off screen. It doesn't. Cannot find the problem.

jsFiddle (for those who prefer)

Raw jQuery / CSS / HTML Code (S.O. Embedded):

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)
         );
};

var d1=0,d2=0,d3=0,dir='dn',cpos=0,lpos=0;
var div1=$('#d1'),div4=$('#d4'),div5=$('#d5');
$(window).scroll(function() {
    cpos = $(window).scrollTop(); //get current scroll position
        div4.html(cpos);
    dir = (cpos>lpos) ? 'dn': 'up'; //get scroll direction
        //div5.html(dir);
    if (dir=='dn'){
        d1 = cpos + (cpos*1.25);
    }else{
        d1 = cpos - (cpos*1.25);
    }
    div1.html(d1); //update pos numbers
    
    div1.dequeue().stop().animate({'top':d1+'px'});
    lpos = cpos; //store for line 6

    div1.is(':offscreen').hide();
    div5.html(  (div1.is(':offscreen')) ? 'yup':'no' );
});

html{height:1800px;}
body{background: url('http://placekitten.com/g/500/500') no-repeat center center fixed;background-size:cover;}
.divs{position:fixed;top:0;height:120px;width:60px;}
#d1{background:yellow;}

#d4{background:wheat;left:380px;}
#d5{background:white;left:440px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="d1" class="divs"></div>
<div id="d4" class="divs"></div><!-- curr window scrollTop -->
<div id="d5" class="divs"></div><!-- curr scroll direction -->

Answer 1

Edit, Updated

Not certain about utilizing :offscreen to test for whether element is "offscreen" or not - as mentioned at original Answer

Depends on what your definition of "offscreen" is. Is that within the viewport, or within the defined boundaries of your page?

It'd be pretty simple to write a check to see if it's offscreen (not taking the viewport into account...)-scurker

At jsfiddle , div1.is(':offscreen') appear to return false after :offscreen element is hidden, resulting in "no" at div5 html. Instead , could utilize jQuery :hidden Selector to check if div1 is :hidden

jQuery .is() returns Boolean .

at

div1.is(':offscreen').hide();

.hide() not chained to this element ; instead chained to is()'s Boolean return value ?

Try, updated

div1.filter(function() {
    return $(this).is(":offscreen")
}).hide();
// added
// modify `div5` `html` by checking if `div1` is `:hidden`
div5.html( div1.is(':hidden') ? 'yup':'no' );

jsfiddle http://jsfiddle.net/guest271314/Lzq85592/5/