扩展jQuery以在视口外创建自定义filter重新元素
发现这个很棒的问题/答案重新扩展jQuery以确定元素是否在屏幕外：
如何检查元素是否在屏幕外
也找到了这篇文章，但无法用来解决问题：
http://code.tutsplus.com/tutorials/dissecting-jquery-filters–net-13954
使用scurker （已接受的答案）代码，当黄色DIV滚出屏幕时，这应警告（并隐藏元素）。 它没有。 找不到问题。
jsFiddle （对于那些喜欢的人）
Raw jQuery / CSS / HTML Code (SO Embedded): jQuery.expr.filters.offscreen = function(el) { return ( (el.offsetLeft + el.offsetWidth) < 0 || (el.offsetTop + el.offsetHeight) 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;}
编辑，更新
不确定如何利用:offscreen测试元素是否“屏幕外” – 如原始答案所述
取决于你对“屏幕外”的定义。 是在视口内，还是在页面的已定义边界内？
编写一个检查以查看它是否在屏幕外（不考虑视口……）非常简单 – scurker
在jsfiddle， div1.is(':offscreen')似乎在以下后返回false :offscreen元素被隐藏，导致div5 html处于“no”。 相反，可以利用jQuery ：hidden Selector检查div1是否为:hidden
jQuery .is（）返回Boolean 。
在
div1.is(':offscreen').hide();
.hide() 没有链接到this元素; 而是链接到is()的Boolean返回值？
尝试，更新
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' );