Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extending styles of sticky and top states #67

Open
ryanmcmanimie opened this issue Nov 19, 2024 · 1 comment
Open

Extending styles of sticky and top states #67

ryanmcmanimie opened this issue Nov 19, 2024 · 1 comment
Labels
enhancement New feature or request

Comments

@ryanmcmanimie
Copy link

I know you provided the className property but I'm curious if there's a way to specifically target the states (i.e. sticky, at the top of page, etc..) as I see that you do swap the classes.

When it's at the top I wanted to drop the opacity of the background so my hero image showed through and invert the colors of my header links. I can do it fine targeting the randomly generated class names but my understanding is that they're apt to change eventually. New to styled components so perhaps I'm missing something though.

@michael-markl
Copy link
Member

Thanks for your question!
You're not missing anything; this is currently not supported (officially) by this package.

There are three modes: Pinned, Unpinned, and Static (default)

I am wondering what the best approach would be for you to consume it.

One option would be to add a callback prop à la onModeChanged which you can use to change your styling (or whatever else you want to do). This seems like the most flexible option, but you have to "duplicate" the mode state in your own component.

Another option would be to add a classname as a prop (one for each mode) that ReactStickyHeadroom would set as additional classname to the wrapper div depending on the mode.

Do you have a preference?

@michael-markl michael-markl added the enhancement New feature or request label Nov 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants