patrickkuhlmann / tricky-sticky-header

A frontend engineering challenge.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tricky Sticky Header Challenge (est. <2h)

The challenge is making the "Disappearing Header" re-appear if the scroll direction is upwards. See the Represent Shop for reference.

Spec:

  • When the header re-appears, it shall push down the content (Product) sticky header.
  • When the scrolling direction is downwards, it shall disappear.
  • There shall be no visisble gaps between the disappearing header & the sticky header-
  • Virtualize the product list with react-virtualized

Development server

Run nx serve web for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Understand this workspace

Run nx graph to see a diagram of the dependencies of the projects.

Remote caching

Run npx nx connect-to-nx-cloud to enable remote caching and make CI faster.

Further help

Visit the Nx Documentation to learn more.

tricky-sticky-header

About

A frontend engineering challenge.


Languages

Language:TypeScript 54.4%Language:CSS 38.3%Language:JavaScript 6.4%Language:SCSS 0.9%