rtfpessoa / diff2html

Pretty diff to html javascript library (diff2html)
https://diff2html.xyz
MIT License
2.8k stars 273 forks source link

Add support for sticky file headers #455

Closed ericcornelissen closed 1 year ago

ericcornelissen commented 1 year ago

On GitHub, as you scroll through the diff of e.g. a Pull Request, the filename sticks to the top of the screen:

GitHub's sticky file header preview.webm

This allows you to see what file you're looking at at all times.

I didn't spot any option (1, 2) to enable this, nor did I manage to find a previous issue requesting this feature.

I played around with this in a browser and I think it can be implemented (ignoring adding logic to support it as an option) by adding the following CSS:

.d2h-file-header {
  /* rest of the css ... */

  /* make it sticky */
  position: sticky;
  top: 0;

  /* prevent UI glitch where line number appear over the header */
  z-index: 1;
}