Question

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

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

Answer 1

您可以使用jQuery来执行此操作。让我们说你的祖先元素是固定位置容器，为简单起见，它有一类“祖先”。让我们说你的后代（兜风提示）有一类“后代”。这两个假设都应该是您可以轻松添加到HTML中的内容，或者使用现有类作为不同的jQuery选择器。然后你可以做这样的事情来进行检测。

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

<强>更新

由于你已经放弃了一些你想要做的事情，我认为这个问题就像是“我怎样才能检查一个祖先是否有一个固定的位置而且没有更接近的祖先滚动？”。除此之外，还要求所有祖先都没有指定类或id。我将假设你的Joyride停止所有都有一类“兜风停止”纯粹为这个例子。因此，要确定是否将固定位置应用于您的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;
        }
    }
}

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

这是你追求的吗？

Answer 2

这是一种纯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 3

到目前为止，我得到的最佳解决方案是使用li的样式手动对提示的position: fixed进行分类。

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

Answer 4

这是一种使用jQuery的方法：

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

检查元素的祖先是否固定

4 个答案: