Extend jQuery to create custom filter re element outside viewport
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 -->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/
链接地址: http://www.djcxy.com/p/2382.html上一篇: 检查jQuery中是否存在元素