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

Question

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

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

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

有人可以帮助我实现这两件事吗？非常感激。谢谢

Answer 1

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

$(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'
        });
    }
});