Add Custom CSS When I Scroll Down

Hi, thanks for trying my plugin!

Can you explain what you’re trying to do? Do you want some CSS that is only applied when the user is actually scrolling (= the page is moving)?

Hi Mark,

I’m trying to resize top and bottom margin in my nav menu!

Thank You

I’m sorry, I’m not sure I understand.

Your sticky element basically has 2 states: it’s sticky, or it’s not. There is no specific state for when you’re actually scrolling.

Maybe you mean that you only want a different top/bottom margin when the element is sticky? Perhaps if you can share a link to your site I will get a better idea.

Yes, Sticky.

I have fixed I put my CSS in this class.
.sticky-element-original { }

Thank You

Hello there @senff and @alquimia ,
would you mind explaining how you did that exactly? I could need a little help. I would like to change the opacity of the background color of my sticky menu everytime it enters the sticky state. Since I am not very fluent with javascript I got a little stuck with this problem.

So basically I would like to have this:

.main-navigation{
	background-color: rgba(255, 255, 255, 0.8);
}

in the sticky state and this:

.main-navigation{
	background-color: rgba(255, 255, 255, 0.2);
}

in the non-sticky state.

Best regards
Omnishambles!

Please put your website url here.
Maybe we can help.

Sure, here it is:
https://www.mosso-duo.de/
You will see the main menu and it sticks to the top if you scroll down. Everything works fine and correctly. And now I would like to change the opacity of the background color of the menu everytime when it sticks to the top. And, as I said, I don’t really know how to get started.

Try this:

/*Sticky OFF*/
#site-navigation.sticky-element-original.sticky-element-active{
background-color: rgba(255, 255, 255, 0.2);
}

/*Sticky ON*/
#site-navigation.sticky-element-original{
background-color: rgba(255, 255, 255, 0.8);
}

It works! Awesome! Thank you very much that helps a lot!

Yes, @alquimia’s solution is correct.

In a future version of the plugin, I will make it a little easier to do this! ??