Question

我必须在现有div下方创建一个div，它通过使用下面的jQuery动态定位。如何计算我的.welcome div的动态顶部位置，并且必须在.welcome下面创建一个新的.content_txt div。动态

请参阅fiddle。我需要在即将发布的欢迎内容下方提供即将发布的文字。

HTML：

<div class="welcomer">
    <center>
        <img src="images/sample.png" alt="xxx" class="main-img" />
    </center>
</div>
<div class="content_txt">
    <center>
        <p class="cmg_soon_txt">Coming Soon</p>
    </center>
</div>

的CSS：

.welcomer {
    width: 100%;
    background: #cc;
}

jQuery的：

$(document).ready(function () {
    $(window).resize(function () {
        $('.welcomer').css({
            position: 'absolute',
                "top": ((($(window).height() - $('.welcomer').outerHeight()) / 2) + $(window).scrollTop() + "px"),
                "left": ((($(window).width() - $('.welcomer').outerWidth()) / 2) + $(window).scrollLeft() + "px")
        });
    });
    // To initially run the function:
    $(window).resize();
});

Answer 1

如果您使用的是jQuery UI，那么您可以使用position实用程序方法将元素相对于另一个对齐：

.content_txt {
    position: absolute;
}

$('.content_txt').position({
    my: "center top",
    at: "center bottom",
    of: ".welcomer:first"
});

Demo here

Answer 2

这是纯JS解决方案，这将有效。它是javascript pickaday日历插件源的修改版本。

function position(field) {
        var pEl = field,
            viewportWidth = window.innerWidth || document.documentElement.clientWidth,
            viewportHeight = window.innerHeight || document.documentElement.clientHeight,
            scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
            left, top, clientRect;

        if (typeof field.getBoundingClientRect === 'function') {
            clientRect = field.getBoundingClientRect();
            left = clientRect.left + window.pageXOffset;
            top = clientRect.bottom + window.pageYOffset;
        } else {
            left = pEl.offsetLeft;
            top = pEl.offsetTop + pEl.offsetHeight;
            while ((pEl = pEl.offsetParent)) {
                left += pEl.offsetLeft;
                top += pEl.offsetTop;
            }
        }
        return [left, top + field.offsetHeight];
}
position(document.getElementById('elementRef'));

如何通过从窗口计算其顶部位置，动态地将新div设置在前一个div之下

2 个答案: