Question

假设我有一个嵌套的div布局，其中任何 div 可能一个固定位置（CSS position: fixed）：< / p>

<div class="MaybeIAmFixedToo">
    <div>
        <div class="MaybeIAmFixed">
            <div>
                <div id="IAmTheTarget">I am the target</div>
            </div>
        </div>
    </div>
</div>

我有一个最内层元素的jQuery引用：$('#IAmTheTarget')。

我怎么能（充其量，没有创造性能噩梦:)）找出我的目标是否在固定的容器中？例如，$('.MaybeIAmFixed')可以有一个固定的位置，但我的目标的任何其他父级也可以。

修改我需要知道这一点，因为当元素被修复时，我需要使用$('#IAmTheTarget').position();获得它的位置，如果没有，我需要使用$('#IAmTheTarget').offset();

Answer 1

您无法通过任何类型的简单选择器。您可以根据位置过滤元素的父列表，但是：

var fixedp = $('#IAmTheTarget').parents().filter(
  function() {
    return $(this).css('position') == 'fixed';
  }
);

alert('fixed ancestors? ' + (fixedp.length ? "yes" : "no"));

示例：http://codepen.io/paulroub/pen/axrFB

Answer 2

以下是Paul提到的函数的实现，在第一个修复的父代停止：

function isElementFixed(el) {
    var $el = $(el);
    while (!$el.is(document)) {
        if ($el.css("position") === "fixed") {
            return true;
        }
        $el = $el.parent();
    }
    return false;
}

如何确定元素是否位于固定的容器中？

2 个答案: