shipshapecode
targetModifier: 'visible' should apply the sticky header (z-index) to the calculated constraint bounds
I have a site with a sticky navigation header at top which is overlayed on the page using z-index and position: fixed and top: 0px.
The problem is that my constraint should constrain the element to the really "visible" part of the target. But it is like the sticky header is ignored in tether's calculations.
Sorry I do not have a jsfiddle yet. But it is like http://github.hubspot.com/tether/examples/content-visible/: Imagine that this page had a sticky header on top. Want I need is that the constraint takes care of this visible sticky header.
Because of the sticky header the 'visible' part of the page is not the whole viewport but only viewport minus the sticky header. I do not know how this could be fixed or if there could be a workaround for it?
Trying to understand the problem... is your target supposed to be
a) within the fixed navigation header b) outside the fixed navigation header or c) the fixed navigation header?
b) target is outside the fixed navigation header.
It's really like http://github.hubspot.com/tether/examples/content-visible/ but with the "Scroll the page" being a fixed (and big) navigation header. If you would scroll down, then eventually the yellow element box would varnish below that fixed navigation header. But what I want is that the yellow element box would be always visible.
What if you change your site's markup so that the scrollable content container lives below the fixed navigation header, rather than being partially obstructed by it? Then you could constrain your Tethered elements within that scrollable container. Also, you'd avoid obscuring the top of the content's scroll bar, right?
@TrevorBurnham That's not possible because it's a WordPress Theme I cannot influence that deeply. See it and its sticky header in action at http://themes.kadencethemes.com/virtue-premium/ (just scroll).
OK. So the header is 60px tall, which means you want to keep the tethered element at least 60px below the top of the page. Have you tried applying a constraint with an array of bound points? E.g.
constraints: [
{
to: [0, 60, 0, 0],
attachment: 'together',
pin: true
}
]
would be nice to have more real world examples like you have when browsing twitter bootstrap examples. your examples are way to abstract. i need a slim sticky header script and want to use tether. like this one: http://www.headcase.ch/
