Question

我遇到了一个棘手的问题，我拼命想找到一个有效的解决方案。

article#post和aside#sidebar左右浮动 - 非常简单。我的article#post内部是h1和div.post-entry。

我想知道我是否可以某种方式确定div.post-entry与外部容器section#content的相对偏移量。我之所以这样做是因为我可以将带有margin-top的浮动侧边栏放在与'div.post-entry`相同的高度上。

以下是我当前html结构的模型：

<section id="content">

    <article id="post">
        <h1>Title of the post</h1>
        <div class="post-entry">
            <p>Something</p>
        </div>
    </article>

    <aside id="sidebar>
        Something
    </aside>

</section>

再次，我想找到任何解决方案，以获得距离顶部div.post-entry在section#content内的位置有多远的像素值。

我遇到的主要问题是post-entry.offsetTop似乎无法工作。这应该得到div.post-entry相对于article.post的偏移，因为这是它的父级。这对我来说也应该有用。

var articleOffset = $('.post-entry').offsetTop;
console.log($('.post-entry')); //found and exists
console.log(articleOffset); undefined

为什么这对我不起作用的任何想法？为什么我这里的offsetTop值未定义。有一个大的<h1>，其填充量至少为“30px”，可抵消div.post-entry。

有关此事的任何想法？也许还有其他很酷的解决方案可以做到这一点？我只想让aside#sidebar从与div.post-entry相同的高度开始，但我不想更改标记。

Answer 1

您需要从jQuery对象中选择DOM元素。

var articleOffset = $('.post-content')[0].offsetTop;

相对于JS中的parent.parent容器的position元素？没有绝对/固定的定位？

1 个答案: