[Resolved] Use sticky header JavaScript for sticky sidebar

[Stefan]

Hey there,
I was wondering if it’s easy possible to use the script of the sticky header feature to create a sticky sidebar?

Right now I use postiton: sticky; but it only works if I set:

.offside-js--init {
    overflow-x: visible;
}

I thought it might be a neat solution to just use the already loaded sticky header script.
Is there an easy way to make the script work for my sidebar? Maybe I’ve to add a class or define something in a extra js file ?

Thanks,
Stefan

[David]

Hi there,

the sticky navigation script is designed solely for the navigation bar.

Whats the exact problem when you use position: sticky; – can you share a link to show us the problem?

[Stefan]

Hi David,
thanks for your response.

Ok I understand. To get it work I need to set overflow: visible for the .offside-js–init, which only appears when sticky header is enabled. Therefore I’m not quit sure if there are any conflicts/ issues I don’t see right now.

The other thing is the missing browser support for older Internet Explorers. A JS solution might work better for them.

The Website is just on a localhost, so no link sorry.

[Tom]

Maybe something like this would work for you?:
https://wordpress.org/plugins/q2w3-fixed-widget/
https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

Let me know 🙂

[Stefan]

I’ll check it out. Thank you for the recommendation.

What about setting the mentioned .offside-js–init class to overflow: visible. Is there any conflict or problem with that.

[Tom]

Not that I can think of, but that class could possibly change in the future.

[Stefan]

Ok I realized that it causes the sticky header to get cut off on mobile.

I better keep it and use another solution.

Thanks for the help anyway.

[Tom]

No problem 🙂

[Author]

Posts