User:Waldyrious/vector.css/fixednav.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/* #mw-page-base is the top-page gradient (white on top, light grey on bottom)
   #mw-head-base provides the top border of the content box.
   it needs to be separate from the top gradient,
   because it doesn't fill the whole width of the page.
*/
#mw-page-base, #mw-head-base, div#mw-head {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 2;
}
#mw-head-base {
  margin-top: 0; /* default margin-top is -5em to compensate the gradient div.
                    since we fix its position (it will stay at top:0), we need to remove that now */
}
/* make main content area start after the top nav */
div#content {
  padding-top: 6em;
}
/* make content text start (roughly) after the heading & its shadow */
#bodyContent {
  margin-top: 4em;
}
/* fix page title too */
#firstHeading {
  position: fixed;
  z-index: 1;                          /* allow it to overlap elements that come after it in the DOM */
  background-color: white;             /* give it some opaque background with which to overlap other elements */
  width: -webkit-fill-available;       /* browser prefix, see https://caniuse.com/mdn-css_properties_width_stretch */
  width: -moz-available;               /* browser prefix, see https://caniuse.com/mdn-css_properties_width_stretch */
  width: stretch;                      /* stretch to available width */
  margin-right: 1rem;                  /* don't stretch all the way to the right end of the container */
  top: 5rem;                           /* make it start after the top elements */
  padding-top: 1rem;                   /* replicate #content's top padding. note: needs to be padding because margin is transparent */
  box-shadow: 0 10px 10px -10px #0003; /* draw a shadow to hint that the content is sliding under it */
}

/* fix left sidebar */
div#mw-panel {
  z-index: 2; /* this is enough to overlap the headers because the sidebar is defined after them in the DOM */
  position: fixed;
  top: 0;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
  border-top: 160px solid transparent; /* this would be neater using margin, but alas, box-sizing:margin-box doesn't exist yet. */
}
 
/* fix logo */
#p-logo {
  position: fixed;
  top: 0;
}
 
/* allow anchors from the TOC to be correctly jumped to
   instead of getting behind the top nav bar */
span.mw-headline {
  padding-top: 9rem;
}