基于窗口调整大小的 jQuery 位置元素

如果您查看此页面：http://dev.driz.co.uk/tips/ http://dev.driz.co.uk/tips/我正在做一些实验来更多地了解 jQuery 以及如何开发类似于我们在 Facebook 上看到的东西。

您将看到我有一个相对于红框定位的工具提示。但是，如果您调整窗口大小，它不会调整与之相关的提示。我该如何解决？

另外考虑到如果用户调整窗口高度大小，则该元素相当高，那么我希望尖端向上移动，以便它出现在屏幕视口内，换句话说，始终距页面底部约 20px，但保持箭头在现在的位置相同，所以只有盒子可以自行调整。

谁能帮助我实现这两件事？非常感激。谢谢

您需要计算窗口调整大小事件中的位置：

$(window).resize(function() {
  // your positioning code here
});

$(document).ready(function() {

    calculation();
    $(window).resize(calculation);

    function calculation() {
        var location = $("#link").offset();

        var top = location.top;

        var left = location.left;
        left = left - $('#tip').width();
        left = left - 15;

        $("#tip").css({
            'position': 'absolute',
            'top': top + 'px',
            'left': left + 'px'
        });
    }
});