Background
This is the first task of the work for the sticky header. It will consist of creating the header bar and feature flagging it. Please review requirements for entire sticky header feature in T283505: [EPIC] Fixed "sticky" site header
Acceptance criteria
- Set up a feature flag for the sticky header. It should be false by default.
- When the feature flag is enabled, a class vector-sticky-header class should be added to the body tag.
- Some CSS is applied to modern Vector to show the sticky header works (note this just verifies it's working, and doesn't reflect the end product or direction):
- A query string param is available to override the feature flag
.vector-sticky-header header {
position: sticky;
top: 0;
background: white;
}developer notes
https://gist.github.com/jdlrobson/e795c574866e93299f5ace3c69590b4c
QA steps
- Navigate to a page on beta cluster with the query parameter &vectorstickyheader=1 i.e. https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein?vectorstickyheader=1
- Inspect the body tag in dev tools and note that the class skin-vector-sticky-header exists
- Compare body tag without the query parameter
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T284463#7278978 |
| 2 | ✅ | T284463#7278978 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T284463#7279002 |
| 2 | ✅ | T284463#7279002 |
