基于窗口调整大小的jQuery位置元素 [英] jQuery position element based on window resize

问题描述

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

If you look at this page: http://dev.driz.co.uk/tips/ I'm doing some experimentation to learn more about jQuery and how to develop things similar to what we've seen on Facebook.

您将看到我有一个相对于Redbox定位的工具提示.但是，如果您调整窗口的大小，则不会相对于窗口调整尖端.我该如何解决?

You will see I have a tooltip that is positioned relative to the redbox. However if you resize the window it doesn't adjust the tip in relation to it. How do I fix this?

还要考虑到如果用户调整窗口高度的大小，元素会很高，那么我想让笔尖向上移动，使其出现在屏幕视口内，换句话说，始终与页面底部保持约20px距离，但保持箭头与现在的位置相同，所以只有它可以自行调整.

Also considering that the element is quite tall if the user resizes the window height then I would want the tip to move upwards so it appears within the screen viewport in other words always having about 20px away from the bottom of the page BUT keeping the arrow in the same place it is now so it's only the box that adjusts itself.

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

Can anyone help me to achieve those two things? Much appreciated. Thanks

推荐答案

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

you'll need to calculate the position in the window resize event:

$(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位置元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！