Multiple Headroom components in single page about react-headroom

[oyeanuj]

+1 for this. A use-case as an example: A page has a global navigation bar and another page sticky bar but need to show the page sticky bar as always on. On scroll-up, would like to have the global navigation bar show up as well - so essentially, two of the headers show up together, both being react-headroom components.

[KyleAMathews]

Would love it if one of you wanted to create an example page for the website. Just create a PR adding a component called multiple-headrooms.js with some examples in the pages directory (https://github.com/KyleAMathews/react-headroom/tree/master/website/pages) and I'll handle linking to it from the main page.

I haven't actually faced this particular use case before so if you're facing it, you'd be ideal to research out possibilities and then create the demo.

[champeng]

@KyleAMathews Actually, I am not able to achieve what I want to do with it. Basically, when I have two headroom components, they both get pinned to the top of the viewport. I am not able to find a configurable parameter which can say that pin headroom 1 to 0,0 while headroom 2 to 0,60, for example. Please let me know if there is any such configuration available or should I look towards doing that in the code itself?

[KyleAMathews]

@champeng you want to use the parent prop — https://github.com/KyleAMathews/react-headroom/search?utf8=%E2%9C%93&q=parent

[KyleAMathews]

oh actually nvm, that's different.

[KyleAMathews]

@champeng isn't pinStart what you want?

[champeng]

@KyleAMathews pinStart is used to when to pin the headroom on scroll event but it is not specifying where to pin.