检查元素的祖先是否已固定

Question

我有一个网站有一个固定的导航栏，我想使用Zurb Joyride将提示附加到导航栏中的元素。问题是，当页面滚动时，导航栏会保持不变，但工具提示不会。

我尝试将工具提示附加到导航栏中的元素（而不是body），但我遇到了奇怪的渲染问题。在包含提示的div上设置position: fixed似乎有效，但我想知道是否有一种简单的方法可以通过编程检测元素是否不滚动，因为它包含在一个固定位置的容器中，这样我就可以检测何时将Joyride提示设置为固定。有什么建议吗？

Answer 1

这里是一个纯JavaScript方法。它在所有偏移的父对象上迭代，直到找到一个固定的父对象（或者根本没有）。

function isFixed(elem){
    do{
      if(getComputedStyle(elem).position == 'fixed') return true;
    }while(elem = elem.offsetParent);
    return false;
}

如果使用jQuery，则需要使用elem[0]或elem.get(0)提取节点对象。

Answer 2

您可以使用jQuery来完成此操作。假设您的祖先元素是固定位置的容器，为了简单起见，它有一个"祖先"类。也可以说你的后代（Joyride提示）有一类"后代"。这两种假设都应该是您可以很容易地添加到HTML中的东西，或者使用现有的类作为不同的jQuery选择器。然后你可以做这样的事情来进行检测。

if ($(".descendant").closest(".ancestor").css("position") == "fixed") {
    // set your Joyride tip to fixed
}

更新

既然你已经透露了更多你想做的事情，我认为问题是"我如何检查一个祖先是否有一个固定的位置，而没有更近的祖先滚动？"。除此之外，还有一个要求，即祖先中没有指定类或id。我假设你的Joyride站点都有一类"Joyride stop"，纯粹是为了这个例子。因此，要确定是否将固定位置应用于Joyride站点，您只需要执行以下操作（使用jQuery，因为zurb Joyride将其作为依赖项）：

var jStops = $(".joyride-stop");
for (var i=0; i<jStops.length; i++) {
    var pEls = jStops[i].parents();
    for (var j=0; j<pEls.length; j++) {
        if(pEls[j].css("position") == "fixed") {
            // closest ancestor is fixed.
            // insert code to fix your Joyride element here
            break;
        } else if (pEls[j].css("overflow") == "scroll") {
            // closest ancestor scrolls so just break and move on
            break;
        }
    }
}

请注意，我在这里只检查了overflowCss属性。如果你想了解，你可以检查overflow-x、overflow-y以及可能影响滚动是否存在的任何其他属性（例如其他一些自定义JavaScript小部件）。检查取决于你需要在你的页面上担心什么，真的，

这就是你想要的吗？

Answer 3

以下是使用jQuery的方法：

var ancestorFixed = false;
$element.parents().each(function () {
    ancestorFixed = ancestorFixed || ($(this).css('position') == 'fixed');
});

Answer 4

到目前为止，我得到的最好的解决方案是用具有position: fixed的样式手动对技巧的li进行分类。

请注意，我突然想到，如果较近的祖先具有滚动内容，则具有position: fixed祖先的元素可能仍会滚动，因此可能没有通用的静态方法通过检测单个position: fixed祖先来解决我的问题。我认为一个理想的解决方案是在滚动时动态更新提示位置，以确保它相对于目标元素保持固定。