Tables and images that are sticky as a whole in online documentation

In technical documentation, a text often refers to a preceding table or image – for example, to a table with technical data or to a picture with the elements of a device or machine. In documentation printed on paper, such tables or pictures are often placed on a fold-out page or on a page facing the text. In online documentation, such a table or image can be kept in view by making them sticky.

Example: Sticky table

Please scroll down.

Parameter	Function
sss	efwef
aa	efewf
rr	wefwef
bb	wefwef
sss	efwef
aa	efewf
rr	wefwef
bb	wefwef
sss	efwef
aa	efewf
rr	wefwef
bb	wefwef
aa	efewf
rr	wefwef
bb	wefwef
sss	efwef

Table needed when reading the text on the right

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

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

Table no longer needed from here

Example: Sticky image

Please scroll down.

Image needed when reading the text on the right

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

Image no longer needed from here

Implementation

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:


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

Step 2: In your authoring tool, create a table with two columns and one row. Place the table or image to be made sticky in the left table cell, and place the text to be displayed while the table or image is visible in the right table cell. Place the subsequent text, where the table or image is allowed to scroll again, below the table.

Best give the left table column a fixed width, and the right column a variable width.

Step 3: In addition, inside the left table cell, place the content to be made sticky (table or image plus title in the example) between the following two HTML snippets:


<div class="stickyobject">


</div>

Step 4 (optional): If, as in the example, you want to limit the height of the table and also make its header sticky, proceed as described in Tables with a sticky header in online documentation.

___

Did you benefit from this information?

In return, please link to this page, mention the page on social media, or buy one of my books.

Thank you!