4

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

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

4

4 回答 4

4

这是一种纯 JavaScript 方法。它遍历所有偏移父级，直到找到一个固定的父级（或根本没有）。

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

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

于 2016-09-11T17:11:32.797 回答
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;
        }
    }
}

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

这就是你所追求的吗？

于 2013-07-03T00:31:06.240 回答
1

这是使用jQuery的一种方式：

var ancestorFixed = false;
$element.parents().each(function () {
    ancestorFixed = ancestorFixed || ($(this).css('position') == 'fixed');
});
于 2015-11-13T21:26:45.967 回答
0

到目前为止，我所拥有的最佳解决方案是手动li将提示的 's 与具有position: fixed.

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

于 2013-07-03T11:06:49.567 回答