Javascript 使用jquery.visible.js和偏移量检测元素是否在视口中

我使用一个非常小的jQuery插件jQuery.visible.js（）来检测元素在当前视口中是否部分可见。尽管如此，我在页面顶部有一个固定的导航，当一个元素位于导航下方时，它会导致问题。相反，如果一个元素在导航下，我需要插件返回false而不是true

如何为插件添加大约50px的偏移量以适应导航

下面是工作代码段。要重现问题，请使用“检测可见性”按钮查看屏幕上显示的内容和未显示的内容。向下滚动，使元素位于导航下方，然后再次按下“检测可见性”按钮

$（函数（）{
//将跨距添加到容器元素。
$（'#container dt'）。每个（函数（）{
$（此）。附加（“”）；
});
//触发
$（'#detect'）。在（'click'，function（）上{
//在每个容器上循环，并检查它是否可见。
$（'#container dt'）。每个（函数（）{
//这个元素在屏幕上可见吗？
var visible=$（this）.visible（true）；
//将可见状态设置到范围中。
$（this）.find（'span'）.text（可见？'Onscreen'：'Offscreen'）.toggleClass（'visible'，visible）；
});
});
});
//JQUERY.VISIBLE.JS插件
（函数（$）{
/**
*版权所有2012，数字融合
*根据麻省理工学院许可证授权。
* http://teamdf.com/jquery-plugins/license/
*
*@作者Sam Sehnert
*@desc一个检查元素是否在
*web浏览器的用户可见视口。
*只考虑垂直位置，不考虑水平位置。
*/
var$w=$（窗口）；
$.fn.visible=函数（部分、隐藏、方向）{
如果（此长度小于1）
返回；
var$t=this.length>1？this.eq（0）：this，
t=$t.get（0），
vpWidth=$w.width（），
vpHeight=$w.height（），
方向=（方向）？方向：“两个”，
clientSize=hidden==true？t.offsetWidth*t.offsetHeight:true；
if（t.getBoundingClientRect的类型=='function'）{
//使用此本机浏览器方法（如果可用）。
var rec=t.getBoundingClientRect（），
tViz=rec.top>=0&&rec.top0&&rec.bottom=0&&rec.left0&&rec.right
看看这是否对您有效。我没有修改现有的
$.visible
插件，而是添加了一个小插件，告诉您一个元素是否被呈现在它前面的另一个元素“屏蔽”。如果四个角都被屏蔽，它返回
true
，如果任何角都未屏蔽，它返回
false

如果您愿意，您可以修改
$.visible
插件，但是如果原始作者更新了它，您必须将您的更改与他的合并

以下是插件：

/*
A plugin to detect if any corner of an element is unshielded by another element
being rendered on top of it.

Returns false if at least one corner is unshielded.
Returns true if all four corners have another (non-child) element rendered on top.
*/
(function($) {
  $.fn.shielded = function() {
    var $t = this.length > 1 ? this.eq(0) : this;
    var t = $t.get(0);

    var rect = t.getBoundingClientRect();

    var topRight    = document.elementFromPoint(rect.right, rect.top);
    var topLeft     = document.elementFromPoint(rect.left,  rect.top);
    var bottomRight = document.elementFromPoint(rect.right, rect.bottom-1);
    var bottomLeft  = document.elementFromPoint(rect.left,  rect.bottom-1);


    if( ($t.is( topRight ) || $.contains(t, topRight)) ||
        ($t.is( topLeft ) || $.contains(t, topLeft)) ||
        ($t.is( bottomRight ) || $.contains(t, bottomRight)) ||
        ($t.is( bottomLeft ) || $.contains(t, bottomLeft))  ){
      return(false);
    }else{
      return(true);
    }
  }
})(jQuery);

以下是您发布的工作代码段，经过修改后可使用该插件：

/*
A plugin to detect if any corner of an element is unshielded by another element
being rendered on top of it.

Returns false if at least one corner is unshielded.
Returns true if all four corners have another (non-child) element rendered on top.
*/
(function($) {
  $.fn.shielded = function() {
    var $t = this.length > 1 ? this.eq(0) : this;
    var t = $t.get(0);

    var rect = t.getBoundingClientRect();

    var topRight    = document.elementFromPoint(rect.right, rect.top);
    var topLeft     = document.elementFromPoint(rect.left,  rect.top);
    var bottomRight = document.elementFromPoint(rect.right, rect.bottom-1);
    var bottomLeft  = document.elementFromPoint(rect.left,  rect.bottom-1);


    if( ($t.is( topRight ) || $.contains(t, topRight)) ||
        ($t.is( topLeft ) || $.contains(t, topLeft)) ||
        ($t.is( bottomRight ) || $.contains(t, bottomRight)) ||
        ($t.is( bottomLeft ) || $.contains(t, bottomLeft))  ){
      return(false);
    }else{
      return(true);
    }
  }
})(jQuery);


$（函数（）{
//将跨距添加到容器元素。
$（'#container dt'）。每个（函数（）{
$（此）。附加（“”）；
});
//触发
$（'#detect'）。在（'click'，function（）上{
//在每个容器上循环，并检查它是否可见。
$（'#container dt'）。每个（函数（）{
//这个元素在屏幕上可见吗？
var visible=$（this.visible（true）和&！$（this.shield（）；
//将可见状态设置到范围中。
$（this）.find（'span'）.text（可见？'Onscreen'：'Offscreen'）.toggleClass（'visible'，visible）；
});
});
});
/*
一个插件，用于检测一个元素的任何一个角是否未被另一个元素屏蔽
在它上面被渲染。
如果至少有一个角未屏蔽，则返回false。
如果所有四个角都在顶部渲染了另一个（非子）元素，则返回true。
*/
（函数（$）{
$.fn.shield=函数（）{
var$t=this.length>1？this.eq（0）：this；
var t=$t.get（0）；
var rect=t.getBoundingClientRect（）；
var topRight=document.elementFromPoint（rect.right，rect.top）；
var topLeft=document.elementFromPoint（rect.left，rect.top）；
var bottomRight=document.elementFromPoint（rect.right，rect.bottom-1）；
var bottomLeft=document.elementFromPoint（rect.left，rect.bottom-1）；
if（$t.is（右上）| |$包含（t，右上））||
（$t.is（左上）| |$.contains（t，左上））||
（$t.is（右下）| |$contains（t，右下））||
（$t.is（左下）| |$.contains（t，左下）））{
返回（假）；
}否则{
返回（真）；
}
}
})（jQuery）；
//JQUERY.VISIBLE.JS插件
（函数（$）{
/**
*版权所有2012，数字融合
*根据麻省理工学院许可证授权。
* http://teamdf.com/jquery-plugins/license/
*
*@作者Sam Sehnert
*@desc一个检查元素是否在
*web浏览器的用户可见视口。
*只考虑垂直位置，不考虑水平位置。
*/
var$w=$（窗口）；
$.fn.visible=函数（部分、隐藏、方向）{
如果（此长度小于1）
返回；
var$t=this.length>1？this.eq（0）：this，
t=$t.get（0），
vpWidth=$w.width（），
vpHeight=$w.height（），
方向=（方向）？方向：“两个”，
clientSize=hidden==true？t.offsetWidth*t.offsetHeight:true；
if（t.getBoundingClientRect的类型=='function'）{
//使用此本机浏览器方法（如果可用）。
var rec=t.getBoundingClientRect（），
tViz=rec.top>=0&&rec.top0&&rec.bottom=0&&rec.left0&&rec.right
尖锐聪明的问题