javascript - 检查 DIV 相对于浏览器屏幕的位置 - jQuery

Question

我有很多具有相同类名的 DIV，让我们保存“wmplayer”。我想确保当这些 DIV 接近浏览器底部时，比方说底部上方 100px，它们将显示:无。我如何使用 jQuery 做到这一点？谢谢

Answer 1

我不完全明白你想要什么，但我相信下面的代码可以解决问题，或者你可以适应你的特定场景。它在窗口 DOM 对象上绑定(bind)一个调整大小事件，每次屏幕调整大小时，它都会在该类的所有 div 上触发一个自定义事件。该事件检查浏览器屏幕的 innserWidth/Height，使用这些值对 div 大小和位置进行一些数学运算以实现目标。此代码检查靠近屏幕底部和靠近屏幕右侧的位置。如果您不想检查右侧，请删除第二个 IF。

var Constant= 100; //100 px
$(document).ready(function() {
    $(window).resize(function() {
        var x= $(window).attr("innerWidth");
        var y= $(window).attr("innerHeight");
        $("div.wmplayer").trigger("DisplayNoneEvent", [x,y]);
    });

    $("div.wmplayer").bind("DisplayNoneEvent", function(x, y) {
        var top, left, divwidth, divheight;
        top= this.css("top");
        left= this.css("left");
        divwidth= parseInt(this.css("width"));
        if (top + divwidth > x + Constant) {
            $("div.wmplayer").css({
                "display": "none"
            });
        } else {
            divheight= parseInt(this.css("height"));
            if (left + divheight > y + Constant) {
                this.css({
                    "display": "none"
                });
            }
            else {
                this.css({
                    "display": "block"
                });
            }
        }
    })
   $(window).trigger("resize"); 
   /* the previous line might not be necessary, I'm not sure. It triggers 
    the event once on pageload */
});

这只适用于具有绝对位置的 div，如果你想使用具有相对位置的 div，你需要获得 div 相对于窗口的位置，不知道如何去做。我只能想到一个递归函数来检查所有 parent 将所有宽度/高度加起来直到它到达文档对象。它太丑陋，太慢并且容易出现代码错误。也许有人对如何去做有更好的想法。

注意:parseint 函数在 IE6 和 IE7 上效果不是很好(IE8 不确定)，你需要先手动删除 this.css("width") 返回的字符串末尾的 'px' 字符串).