Tabellen und Bilder als Ganzes klebend in Onlinedokumentation

In Technischer Dokumentation bezieht sich oft ein Text auf eine vorangegangene Tabelle oder auf ein vorangegangenes Bild – beispielsweise auf eine Tabelle mit technischen Daten oder auf eine Bild mit den Elementen eines Geräts oder einer Maschine. In einer auf Papier gedruckten Dokumentation werden solche Tabellen oder Bilder gerne auf eine Ausklappseite oder auf eine dem Text gegenüberliegende Seite gesetzt. In einer Onlinedokumentation lässt sich eine solche Tabelle oder ein solches Bild im Blick halten, indem sie als klebend (sticky) definiert werden.

Beispiel: Klebende Tabelle

Scrollen Sie nach unten.

##### ##### ##### ### ##### ########### ########## ##### ### ## ###### ########## ######### ##### #### ###### ##### ##### ## ## ######### ########## ### #### ######### ##### ####### ###### ######### ############ ##### ### ###### ######## ## #### ## ########### ####### ###### ##### ######## # ##### #### ######## ########### ###### ###### ###### ## ######## ## ####### ########## ### ## ###### # ###### ####### ############# #### ######## ######## ####### ### ### #### ####### ###### ##### ####### #######

## ######### ########## ### #### ######### ##### ####### ###### ######### ############ ##### ### ###### ######## ## #### ## ########### ####### ###### ##### ######## # ##### #### ######## ########### ###### ###### ###### ## ######## ## ####### ########## ### ## ###### # ###### ####### ############# #### ######## ######## ####### ### ### #### ####### ###### ##### ####### #######

##### ##### ##### ### ##### ########### ########## ##### ### ## ###### ########## ######### ##### #### ###### ##### ##### ## ## ######### ########## ### #### ######### ##### ####### ###### ######### ############ ##### ### ###### ######## ## #### ## ########### ####### ###### ##### ######## # ##### #### ######## ########### ###### ###### ###### ## ######## ## ####### ########## ### ## ###### # ###### ####### ############# #### ######## ######## ####### ### ### #### ####### ###### ##### ####### #######

Table no longer needed from here

##### ##### ##### ### ##### ########### ########## ##### ### ## ###### ########## ######### ##### #### ###### ##### ##### ## ## ######### ########## ### #### ######### ##### ####### ###### ######### ############ ##### ### ###### ######## ## #### ## ########### ####### ###### ##### ######## # ##### #### ######## ########### ###### ###### ###### ## ######## ## ####### ########## ### ## ###### # ###### ####### ############# #### ######## ######## ####### ### ### #### ####### ###### ##### ####### #######

Beispiel: Klebendes Bild

Scrollen Sie nach unten.

##### ##### ##### ### ##### ########### ########## ##### ### ## ###### ########## ######### ##### #### ###### ##### ##### ## ## ######### ########## ### #### ######### ##### ####### ###### ######### ############ ##### ### ###### ######## ## #### ## ########### ####### ###### ##### ######## # ##### #### ######## ########### ###### ###### ###### ## ######## ## ####### ########## ### ## ###### # ###### ####### ############# #### ######## ######## ####### ### ### #### ####### ###### ##### ####### #######

## ######### ########## ### #### ######### ##### ####### ###### ######### ############ ##### ### ###### ######## ## #### ## ########### ####### ###### ##### ######## # ##### #### ######## ########### ###### ###### ###### ## ######## ## ####### ########## ### ## ###### # ###### ####### ############# #### ######## ######## ####### ### ### #### ####### ###### ##### ####### #######

##### ##### ##### ### ##### ########### ########## ##### ### ## ###### ########## ######### ##### #### ###### ##### ##### ## ## ######### ########## ### #### ######### ##### ####### ###### ######### ############ ##### ### ###### ######## ## #### ## ########### ####### ###### ##### ######## # ##### #### ######## ########### ###### ###### ###### ## ######## ## ####### ########## ### ## ###### # ###### ####### ############# #### ######## ######## ####### ### ### #### ####### ###### ##### ####### #######

Image no longer needed from here

##### ##### ##### ### ##### ########### ########## ##### ### ## ###### ########## ######### ##### #### ###### ##### ##### ## ## ######### ########## ### #### ######### ##### ####### ###### ######### ############ ##### ### ###### ######## ## #### ## ########### ####### ###### ##### ######## # ##### #### ######## ########### ###### ###### ###### ## ######## ## ####### ########## ### ## ###### # ###### ####### ############# #### ######## ######## ####### ### ### #### ####### ###### ##### ####### #######

Implementierung

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

div.stickyobject {
  position: sticky;
  top: 5px;
  z-index: 1;
}

Schritt 2: Erstellen in Sie in Ihrem Redaktionssystem eine Tabelle mit zwei Spalten und einer Zeile. Setzen Sie die klebrig zu machende Tabelle oder das klebrig zu machende Bild in die linke Tabellenzelle, den während der Sichtbarkeit der Tabelle oder des Bilds anzuzeigenden Text in die rechte Tabellenzelle. Den nachfolgenden Text, bei dem die Tabelle oder das Bild wieder weiterscrollen darf, setzen Sie unter die Tabelle.

Am besten geben Sie der linken Tabellenspalte eine feste Breite, der rechten Spalte eine variable Breite.

Schritt 3: Setzen Sie zusätzlich in der linken Tabellenzelle den klebend zu machenden Inhalt (im Beispiel Tabelle oder Bild plus Titel) zwischen folgende beiden HTML-Schnipsel:

<div class="stickyobject">

</div>

Schritt 4 (optional): Wenn Sie, wie im Beispiel, die Höhe der Tabelle begrenzen und deren Kopfzeile ebenfalls wiederum klebend machen möchten, gehen Sie hierfür vor wie unter Tabellen mit klebender Kopfzeile in Onlinedokumentation beschrieben.