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

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

1 个答案: