Check if the element ancestor is fixed

Question

I have a website with a fixed navigation bar, and I want to use Zurb Joyride to add tips to the elements in the navigation bar. The problem is that while scrolling the page, the navigation bar remains, but the tooltips do not work.

I tried to snap tooltips to elements in navbar (instead of body ), but I had strange rendering problems. Setting position: fixed to a div containing the tip seems to work, but I'm wondering if there is a simple way to programmatically determine if the element is different from scrolling, because it is contained in a container with a fixed position, so that I can determine when to also install Joyride tips. Any suggestions?

Answer 1

You can use jQuery for this. Suppose your ancestral element, which is a fixed-position container, has an ancestor class for simplicity. Lets also say that your descendants (Joyride tips) have a descendant class. Both of these assumptions should be something that you can easily add to your HTML, or, alternatively, use an existing class as another jQuery selector. Then you can do something similar to make your discovery.

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

Update

Since you have given a little more from what you want, I think this question is something like "How to check if an ancestor has a fixed position and if there is a closest ancestor that scrolls?". Adding to this, there is a requirement that none of the ancestors have classes or identifiers. I'm going to assume that your Joyride stops, everyone has a "joyride-stop" class solely for this example. Therefore, to determine whether to apply a fixed position to your Joyride stop or not, you just need to do the following (using jQuery, since zurb joyride has this as a dependency):

 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; } } } 

Note that I only checked the overflow css property here. If you want a fantasy, you can check overflow-x, overflow-y, and potentially any other attribute that might affect the scroll (for example, some other custom JavaScript widget). The check depends on what you need to worry about on your page,

Is that what you were after?

Answer 2

Here is a clean JavaScript approach. It iterates over all offset parents until it finds a fixed (or nothing at all).

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

If you are using jQuery, you need to extract the node object using elem[0] or elem.get(0) .

Answer 3

So far, the best solution has been to manually classify li tooltips with a style that has position: fixed .

Please note that it occurs to me that an element with an ancestor of position: fixed can scroll if a closer ancestor has content scrolling, so apparently the general static method does not solve my problem by detecting one ancestor of position: fixed . I think the ideal solution would be to dynamically update the location of the tip while scrolling to make sure that it remains stationary relative to its target element.

Answer 4

Here's a way to use jQuery:

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