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

Question

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

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

另外考虑到如果用户调整窗口高度时元素非常高，那么我希望提示向上移动，以便它出现在屏幕视口内，换句话说，始终距离页面底部约 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'
        });
    }
});