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 11 months ago by mindsoarco.
• This reply was modified 11 months ago by mindsoarco.
• This reply was modified 11 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