基於窗口調整大小的jQuery位置元素

Question

如果你看看這個頁面：http://dev.driz.co.uk/tips/我正在做一些實驗，以更多地瞭解jQuery以及如何開發類似於我們在Facebook上看到的東西。

你會看到我有一個相對於紅框定位的工具提示。但是，如果調整窗口大小，它不會調整與其相關的提示。我該如何解決？

還考慮到該元素是相當高的，如果用戶調整窗口的高度，那麼我會想尖向上移動，所以它出現在換句話說屏幕視口內總是有大約20像素遠離頁面的底部，但保持箭頭位於現在的相同位置，所以只有盒子可以自行調整。

任何人都可以幫助我實現這兩件事嗎？非常感激。由於

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