Comments (5)
Can you attach a gif to show the problem pls?
from storefront-qwik-starter.
@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"
from storefront-qwik-starter.
I see, thanks for the feedback. I will investigate in it
from storefront-qwik-starter.
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.
from storefront-qwik-starter.
@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?
from storefront-qwik-starter.
Related Issues (20)
- looking for documentation to list products by category HOT 5
- Stripe doesn't work ? HOT 3
- 83 point Best practise Lighthouse benchmark HOT 1
- Thanks for sharing the repo HOT 1
- feat: image preview + mobile searchBar + stripe HOT 8
- how to up second storefront HOT 3
- Limit storefront query by adding options: (take:Int) HOT 13
- mobile: add SearchBar
- feat: menu bar to the top left corner HOT 1
- feat: whishlist HOT 1
- Accessing undefined in routes/layouts.tsx HOT 3
- feat: cash on delivery HOT 4
- Checkout with Stripe does not redirect to a confirmation page HOT 22
- Problems with project setup HOT 1
- Feature Request: Promotion Code Implementation HOT 6
- Updated README.md and installation instructions to reflect the use of pnpm install HOT 4
- CSP HOT 1
- Unable to add customFields field to product GraphQL query HOT 1
- Unsure how to add customfields to OrderLine mutation HOT 15
- Issue with Product Display after installing Vendure ElasticSearchPlugin HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storefront-qwik-starter.