Can't set stops on a fixed-position element

[acjay]

I want to have stops in my fixed navbar as well as the scrollable body of my page, but there doesn't seem to be a way to accomplish this. Overriding tipContainer for individual items is the obvious solution, but in my experience, this doesn't work (as mentioned in https://github.com/zurb/joyride/issues/107)

[hugomoss]

Hello, I also have a position fixed header, and would like to have stops on the header as well. I thought about adding position fixed to the elements, but it seems it wont work.

[itsmattsoria]

@acjay - tips that are set to elements on a scrollable should work fine, just make sure that parent element has a position of relative or static. If the container has a position of absolute or fixed then your tooltip is going to be glued to the same spot on your screen as you scroll, instead of stick to the element you wanted it to.

@hugomoss Setting position: fixed to the tipContainer when the parent element is fixed has been working for me in general, except in areas that the fixed element has overflow and is scrollable. But I also needed it to work on a fixed header, and it worked as long as I set the tip to positon: fixed.
ex:

<ol id="joyride">
   <li data-class="fixed-header" class="custom">
     <p>Tip content</p>
   </li>
</ol>

.custom {
    position: fixed;
}

You might also have to adjust the z-index of the tip depending on the z-index of your fixed header as well, but it works fine if there's no overflow!

[hugomoss]

@poopsplat hmm, that's what I tried by setting the tip to position fixed, but it didnt work right. The scrolling wouldn't work, and would stop abruptly. Instead I decided to make a custom script that would work with position fixed, by creating an ol list similar to joyride but specifiying if the tip is to be fixed or absolute. So far that works.

[evoactivity]

How can you make the tooltip ignore the scroll position? If you reload the page when already scrolled down, or scroll before the window.load event fires then the tooltip is positioned incorrectly.

[HugoHeneault]

@poopsplat Thanks for the idea of using a custom class. :+1:

But it seems to have some issues with scrolling : when I scroll 50px before stop changing, the stop appears 50px away from it's awaited position...

Any idea ?

[dougajmcdonald]

I have a similar problem, I have a fixed position navigation bar down the left, and a scrollable body on the right.

I want to set stops at two places on my fixed navigation. The first stop positions correctly and my scrollable body stays where it is, but the second stop sets the position correctly, and scrolls the body up, so it appears in the wrong place.

Is there any solution to this? I've tried adjusting the tips to have a fixed/absolute position but this hasn't helped.

[ownergroup]

Have anyone already solved it?