Top position when fixed = false

[mh-nichts]

First of all, thanks for this useful plugin.

I have a specific case where I want the colorbox to be in a precise place relative to the page. I don't want it to be fixed in the viewport (I want it to follow the page while scrolling), so I defined those settings :

• fixed : false
• top : myTopPosition

This works well if I open the colorbox when I haven't scrolled the page yet : the colorbox has myTopPosition and is following the page while scrolling.

The problem occurs if I have already scrolled the page a bit when I launch the colorbox : the colorbox opens indeed at myTopPosition relative to the viewport, but then it's not positioned correctly where I want it to be relative to the page : it's lower. It looks that the top position is calculated as such : myTopPosition + window.scrollTop.

Here is a reduced test case : https://codepen.io/mh-nichts/pen/QgQxJo Try to open the colorbox first when you haven't scrolled, and then when you have scrolled a bit.

Is there a way to specify that the top position should be, indeed, relative to the body when fixed = false ? Or is that too much twisting in the functioning of the plugin ?

Thanks in advance for your feedback !

[jackmoore]

Sorry, I don't have a good solution for you. You'd have to edit Colorbox because it just wasn't designed to position like that.

It's not a perfect workaround, but you can overwrite Colorbox's inline position by using !important in your CSS. Something like #colorbox { top: 100px !important; } would keep it 100px from the top of the document, instead of the screen. I updated your demo: https://codepen.io/anon/pen/eRVwGB

Since Colorbox takes focus, the viewport will automatically scroll so that Colorbox is within the viewport. Not sure if that's something you want or not since you are no longer keeping Colorbox within the viewport. You'd have to edit the source to disable focus management.