Sticky header .x-bar-fixed on scroll

[RubberDuckers]

Hi there,

Previously on sticky headers, it added x-bar-fixed on scroll but it seems to do that now on page load - is that new?

[ruenel]

Hello @RubberDuckers,

Thanks for writing in! If your Trigger Offset is 0, the x-bar-fixed class is added to the Bar element. If you set a value greater than 0, you will not have the x-bar-fixed class.

Best Regards.

[RubberDuckers]

Thanks @ruenel - is that new? I’ve never touched the Trigger Offset before and x-bar-fixed always gets added after scroll. It’s only on more recent versions I’ve noticed it there without.
Is there any other way (other than some custom JS) of adding a class when it does scroll - as I want it to stick all the time but only have styling after scroll.

[tristup]

Hi @RubberDuckers,

There is no other way except the custom JavaScript to add any class when it scrolls. But, as I can understand your requirements, you want to change the color of the Header when you start scrolling.
I would suggest you create two different Bars and set the second bar Initially Hidden with the style you want as described in the following thread, which might help you to acheive what you want.

Sticky bar first transparent

Hi there Is it possible to have the sticky bar first transparent and with the first scroll get a background color? Thanks Andreas

Pro Header Builder - Issues with Shrink on Sticky Bar!

Hi, I’m using the Pro header builder and I’ve tried to look for a guide or something in writing to help me with it, but all I could find is this link https://theme.co/docs/header-footer-overview and some video tutorials. The documentation doesn’t go into any detail, it’s very basic and the videos aren’t specific to what I want to know, so is there a page or link I haven’t come across which explains the header builder in more detail? I’m hoping you can help me with the following: I’ve set the …

Transparant header overlaying first section

That’s quite a pitty as you guys usually gave at least a great answer. I only read that all is outside of the scope of your theme, whereas I see multiple similar questions being answered in a proper way. Regretting a little going ahead with X theme.

Thanks

[RubberDuckers]

Thanks. In this case, it’s a small bit of animation. It was working perfectly when targeting the .x-bar-fixed class until I updated it to v6.x.x so I imagine it’s that.
I’ll just add a class on scroll - shame though as I think two different bars should be avoided where possible - 2 extra things to manage.

[tristup]

Hi @RubberDuckers,

What you are expecting is the required customization and the solution provided can be achieved through the default settings. I would suggest you use the multiple headers in case.

Thanks