Support optional sticky subheader about react-headroom

[SachaG]

Supporting this would be awesome! Any news on this feature?

[WickyNilliams]

You shouldn't need to do anything to support this use-case. IIRC product hunt are using the original headroom, and there is no special support for this. Providing you know the height of the top component of the header, all you need to do is negatively translateY by that amount.

See this fiddle: https://jsfiddle.net/z74ujuoy/

[KyleAMathews]

Yeah this has been supported for a while. Just use the pinStart prop see http://kyleamathews.github.io/react-headroom/

[SachaG]

Thanks, I'll try with the custom CSS example. But I don't really see how pinStart would help with this? If I understand correctly it changes when the element gets pinned and unpinned, but it doesn't change how much it gets translated by?

[KyleAMathews]

You just want the subheader to be pinned to the top correct? pinStart makes it so the subheader is only pinned once its at the top. Otherwise as soon as you scroll down it'd be snnaped to the top.

[kici8]

Please, can you give us an example?

[hpohlmeyer]

I think this is not fixed. You can come close to the desired effect, but not fully.

Here is an example:
https://codesandbox.io/s/headroom-double-header-example-i4nc6?file=/src/App.js

If I do not set pinStart, the .headroom-unpinned class does not get applied before I scrolled past the whole header, including the subheader. After I have done that, it pops back in:

To avoid that, pinStart can be set to the negative height of the subheader. This is almost the desired outcome, but since pinStart is negative now, .headroom--unfixed won’t be applied anymore, which means the header stays fixed until we hit the header height an disappears immediately. In the meantime content will be hidden under the header.

Currently I do not see a way to work around it, without altering headroom. I currently see several ways to resolve this:

1. Update shouldWork to handle negative pinStart values
2. Let the user provide a custom header height, that overrides the calculated one
3. Add a new property, that can be used to subtract a component from the wrapped content

I can provide a PR if you’d like @KyleAMathews. Maybe you can point me to your prefered solution …