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

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

你会看到我有一个相对于redbox定位的工具提示。 但是，如果您调整窗口大小，则不会调整与其相关的尖端。 我该如何解决？

如果用户调整窗口高度，我还要考虑该元素非常高，然后我希望笔尖向上移动，这样它就会出现在屏幕视口内，换句话说总是距离页面底部大约20px但是保持箭头它现在是同一个地方所以它只是调整自己的盒子。

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

Answer 1

你需要在窗口resize事件中计算位置：

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