Positionieren Sie Sticky, während Sie Inline-Elemente versetzen

Question

Ich versuche, Inline-Elemente schrittweise zu versetzen, während ich eine klebrige Position auf ihnen verwende, so dass die Elemente beim Scrollen des Benutzers einrasten und eine kohärente Struktur bilden. Zum Beispiel habe ich ein übergeordnetes Element, divdas ein untergeordnetes Element enthält p, das wiederum mehrere untergeordnete Elemente enthält span.

<div>
  <p>
    <span>w</span>
    <span>o</span>
    <span>r</span>
    <span>d</span>
  </p>
</div>

Was ich getan habe, ist, jeden Buchstaben schrittweise zu versetzen translateY(da stickyoffensichtlich topusw. verwendet wird, um den Knackpunkt zu bestimmen), so dass der erste Buchstabe beispielsweise um 100%den zweiten Buchstaben um 200%usw. versetzt wird. Die Idee ist, dass jeder Buchstabe beim Scrollen des Benutzers einrastet und schließlich ein Wort bildet, wenn der Benutzer mit dem Scrollen fertig ist.

Ich weiß, dass das Problem darin besteht, dass stickydie spanElemente, sobald ich sie aktiviere , relativeauf dem übergeordneten Element positioniert werden , was bedeutet, dass die Elemente IMMER relativ zum übergeordneten Element versetzt sind. Ich kann einfach keine reine CSS-Lösung finden.

Ich habe beim Schreiben eine Idee bekommen: Vielleicht besteht der Trick darin, topzu versetzen, aber bottomzum Kleben?

Hier ist ein Codepen des eingebetteten Codes unten.

html,
body { width: 100%; height: 100%; margin: 0; }

div  { border: solid red 2px; box-sizing: border-box; }

p    { font-family: arial; font-size: 104px; border: solid blue 2px; box-sizing: border-box;
  overflow-y: scroll;
  margin: 0;
}

span { border: solid black 2px; box-sizing: border-box;
  /* position: sticky; */
  top: 0;
  display: inline-block;
}

span:nth-child(1) { transform: translateY(100%); }
span:nth-child(2) { transform: translateY(200%); }
span:nth-child(3) { transform: translateY(300%); }
span:nth-child(4) { transform: translateY(400%); }

<div>
  <p>
    <span>w</span>
    <span>o</span>
    <span>r</span>
    <span>d</span>
  </p>
</div>

Answer 1

Sie können für jeden Buchstaben einen negativen Prozentsatz verwenden, um die Transformation zu versetzen:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

div {
  border: solid red 2px;
  box-sizing: border-box;
}

p {
  font-family: arial;
  font-size: 104px;
  border: solid blue 2px;
  box-sizing: border-box;
  overflow-y: scroll;
  margin: 0;
}

span {
  border: solid black 2px;
  box-sizing: border-box;
  position: sticky;
  display: inline-block;
}

span:nth-child(1) {
  transform: translateY(100%);
  top: -100%;
}

span:nth-child(2) {
  transform: translateY(200%);
  top: -200%;
}

span:nth-child(3) {
  transform: translateY(300%);
  top: -300%;
}

span:nth-child(4) {
  transform: translateY(400%);
  top: -400%;
}

<div>
  <p>
    <span>w</span>
    <span>o</span>
    <span>r</span>
    <span>d</span>
  </p>
</div>

Answer 2

Hier ist eine weitere Lösungsidee, die besser für Monospace-Schriftarten und generische Schriftarten geeignet ist (Sie müssen den Stil nicht mit festlegen nth-child).

div {
  border: solid red 2px;
  box-sizing: border-box;
}

p {
  font-family: monospace;
  font-size:90px;
  border: solid blue 2px;
  box-sizing: border-box;
  overflow-y: scroll;
  margin: 0;
  line-height: 1.2em;
  height: 1.2em; /* equal to line-height */
}

span {
  position: sticky;
  top: 0;
  display: block;
}

span:first-child {
  margin-top: 1.2em; /* equal to line-height */
}

span:not(:first-child)::before {
  content: "";
  float: left;
  width: 1ch;
  height: 1.3em; /* a bit bigger than the line-height */
}

<div>
  <p>
    <span>H</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
    <span> </span>
    <span>w</span>
    <span>o</span>
    <span>r</span>
    <span>d</span>
  </p>
</div>