Jump to content
Search Community

Change button color when navbar is visible

Volt 22 test
Moderator Tag

Recommended Posts

Hello everyone,

I have some color change animations in a site, a fixed button on the top right changes color as the background color of the body changes.

When the background of the body changes to yellow, the fixed button background changes to green.


Also, the navbar with the logo disappears on scroll down and reappears on scrollup, and the navbar has a green background, so on scroll up when the body background is yellow, the navbar has the same color with the button.

I do not want to play the color change animation for the button on scroll up at all.

 

Thank you.

See the Pen poLqYYG by voltmeup (@voltmeup) on CodePen

Link to comment
Share on other sites

Hello Cassie,


Thank you for the swift reply. 
However, what happens when I scroll down pass the onEnter marker, and not scroll beyond the onLeave marker but then start to scroll upward. The button will already be green, and not revert until I scroll pass the onEnter marker again.

  • Like 1
Link to comment
Share on other sites

Well that sounds like some conditional logic you would have to work out how to handle. Callbacks are just functions at the end of the day, you can write out whatever you need in them. Toggling a boolean for 'isGreen' could be an option.

 

Why don't you give one of the routes I've suggested a go and pop back with a demo if you get stuck!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...