"Anchor" an element around another element.

anchor-coordinates.js

function getAnchorCoordinates(anchor, container, me) {
    me = me || this.el;
    container = container || document.body;

    // Margins - use half a margin for normal positioning, the full margin for compensating
    // against the container box
    var offsetMarginX = 30;
    var offsetMarginY = 30;

    // The coordinates we're anchoring around
    var anchorBox = anchor.getBoundingClientRect();
    // The container to ensure this element doesn't fall out of
    var containerBox = container.getBoundingClientRect();
    // The coordinates of the currently rendered element
    var ownBox = me.getBoundingClientRect();

    // Ideal positioning: centred horizontally beneath the anchor, with some margin.
    var ownLeft = anchorBox.left + anchorBox.width / 2 - ownBox.width / 2;
    var ownTop = anchorBox.bottom + offsetMarginY / 2;

    // If the first attempt means the bottom of the box falls out, compensate:
    if(ownTop + ownBox.height > containerBox.bottom) {
        // Try and position the element above the anchor with the same margin
        ownTop = anchorBox.top - ownBox.height - offsetMarginY / 2;
    }
    // If we're now rendering too far "above" the container, bring it back down.
    if(ownTop < containerBox.top) {
        ownTop = containerBox.top + offsetMarginY / 2;
    }

    // The same for the left...
    if(ownLeft + ownBox.width > containerBox.right) {
        ownLeft = containerBox.right - ownBox.width - offsetMarginX;
    }
    // If too far to the left, push right.
    if(ownLeft < containerBox.left) {
        ownLeft = containerBox.left + offsetMarginX;
    }
    return {
        top: ownTop,
        left: ownLeft
    }
}