Расширение jQuery для создания настраиваемого элемента фильтра re вне видового экрана

Нашел этот SO большой вопрос/ответ, расширив jQuery, чтобы определить, выключен ли элемент:

Как проверить внеэкранный элемент

Также нашел эту статью, но не смог ее решить:

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

Используя код scurker (принятый ответ), это должно предупредить (и скрыть элемент), когда желтый DIV прокручивается с экрана. Это не так. Не удается найти проблему.

jsFiddle (для тех, кто предпочитает)

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 -->

Ответы

Ответ 1

Изменить, обновить

Не уверен в использовании :offscreen для проверки того, является ли элемент "вне экрана" или нет - как указано в оригинале Отвечать

Зависит от того, что такое определение "вне экрана". Это в пределах в окне просмотра или в пределах определенных границ вашей страницы?

Было бы довольно просто написать чек, чтобы проверить, не является ли оно вне экрана (не принимая во внимание экран просмотра...) - scurker

В jsfiddle, div1.is(':offscreen'), как представляется, возвращается false после того, как элемент :offscreen скрыт, в результате чего "нет" в div5 html. Вместо этого можно было бы использовать jQuery : hidden Selector, чтобы проверить, есть ли div1 :hidden

jQuery . is() возвращает Boolean.

at

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

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