sticky header not working about storefront-qwik-starter

[gioboa]

Can you attach a gif to show the problem pls?

[msj121]

@gioboa Sure, the issue also applies to default store. Top image you can see the main load screen with bar at top

Here you can see as you scroll there is no header that sticks (ie: like fixed position), I can see the tailwind class for sticky, but it is not working:

header has class="bg-gradient-to-r from-blue-700 to-indigo-900 transform shadow-xl sticky top-0 z-10 animate-dropIn"

[gioboa]

I see, thanks for the feedback. I will investigate in it

[msj121]

Ok - solved it - I will make a pull request. Just trying to touch up the design because I am not sure I am a fan yet.

Solution: the "class" on header needs to be moved to its parent div like this:

<div class="sticky top-0 left-0 right-0 bg-gradient-to-r from-blue-700 to-indigo-900 transform shadow-xl sticky top-0 z-10 animate-dropIn">
			<header>
				<div... 

Nvm.. that messes up the cart. Ok, cart needs to be moved to "layout" after header.

[msj121]

@gioboa Okay I made a PR where I did some quick checking it works. Not sure if design wise it is what you want but here is a snapshot below:

I did mention in PR, is there a way to "resize" or change "classes" on scroll using qwik. I will have some javascript that watches window scroll event, and if not top of the page I can set a signal to true and change classes, but I don't want to cause inefficient code with qwik. Any advice?