i don’t want sticky header to appear at first

Hello. I’m making the sub-section of the header sticky. But I have a specific requirement. I want this sub-section to be hidden initially and only appear when scrolled down and the sticky effect is activated. To achieve this, I wrote a CSS code, but there’s something bothering me. When I scroll to the very top, the sub-section disappears, but it disappears in fragments. I haven’t been able to solve this issue. I would appreciate any suggestions you might have.

My code:

.whb-header-bottom {
		visibility:hidden;
}
.whb-sticked >.whb-main-header > .whb-header-bottom {
    visibility:visible;
}

Please watch the video.
https://app.usebubbles.com/9re1h3LpviwuptqXiRKZTB/untitled

Hello,

Please send me access to the admin dashboard so I will investigate it on your side.

Feel free to reach out to me anytime when you have anything more to say.

Kind Regards

[mindsoarco]

/* Sticky header style - making the background slightly blurred and reducing the opacity /
/ Additionally, the reason for setting the position as absolute is to avoid the content of the page appearing shifted downwards with empty space when the bottom section is not visible. I made the bottom section inactive. */
.whb-header-bottom {
background-color: rgba(255, 255, 255, 0.82)!important;
backdrop-filter: blur(16px);
position: absolute;
width: -webkit-fill-available;
}

/* The sticky header will not be initially visible and will only appear when scrolled */
.whb-header-bottom {
opacity: 0;
pointer-events: none;
}
.whb-sticked > .whb-main-header > .whb-header-bottom {
opacity: 1;
pointer-events: all;
}

Thank you for your help, my friend. However, I managed to solve it myself. I wanted to share this code with you. Translate the parts in Turkish to English if needed.

• This reply was modified 1 year, 5 months ago by mindsoarco.
• This reply was modified 1 year, 5 months ago by mindsoarco.
• This reply was modified 1 year, 5 months ago by mindsoarco.

Hello,

Glad that you have resolved it.

Always remember that you can reach out to us with any questions you may have.

We wish you a splendid day!

Kind Regards

[Author]

Posts