Enable CSS code when header is sticky

Hi Woodmart Support,

On the website of a client, there is an iFrame shown. It has a particular height, filling the screen, excluding the header. The problem we are facing is that when you scroll down, the height of the header changes. This is because we only want the bottom part of the header to be sticky. But without JS, changing the iFrame’s height is difficult when the header becomes sticky. I would like to ask for your support in writing the correct code to achieve this.

Summarized: We need some JS code that enables a piece of CSS code as soon as the header becomes sticky.

Thanks already,
Danny | Madoo

Attachments:

You must be logged in to view attached files.

Hello,

Is there any chance that you could give me access to the dashboard area so I can have a look at the settings on your website, please?

Kind Regards

I gave you access to the test duplication of the website, which is meant for development purposes. (The URL says staging, but it isn’t working as one anymore.) The client is quite careful with the live website.

So if you come up with a solution, please let me know how to implement it on the live website.

Hello,

The best option is to make the main header row as sticky: https://prnt.sc/1CviECE9dXzd , https://prnt.sc/LLqLSElXYbTq

Otherwise, you can add a custom CSS class to the element: https://prnt.sc/vqByV7kdM98O and then with the help of the code below, you can decrease that gap:

.single-product:has(.whb-sticked) .custom-product-column {
    margin-top: -45px;
}

Result: https://gyazo.com/72994548445b4d7c8a937dbd9a0be832

Unfortunately, we cannot provide the custom code via JS, because it’s beyond our limitations and support policy.

Let me know if you have any questions.

Kind Regards

[Madoo Webdesign]

Hi,

Thanks a lot for the help. :has(.whb-sticked) worked great. In the end, I created a variable with the header height and changed it according to if the header was sticky or not:

body{
	--header-height: 150.99px;
}

body:has(.whb-sticked){
	--header-height: 45px;
}

The other solution with the complete header sticky, was exactly what we wanted to avoid.

• This reply was modified 3 weeks, 3 days ago by Madoo Webdesign.
• This reply was modified 3 weeks, 3 days ago by Madoo Webdesign.

Hello,

Great, so in this case the topic can be closed?

Thank you for your time.

Kind Regards

[Author]

Posts