Yesterday I had inquired about a solution for creating wing-like structures for a plane (for a seatmap). The question and its corresponding "solution" can be accessed here: Building a seatmap with kind of wings for the plane
We received a solution, but now a new issue has arisen: when the content is small enough that the cabin does not need to scroll, everything works fine. However, once there are enough seat rows to require scrolling, the wings must move along with the seats. They cannot remain static, as it is crucial for passengers to know if their seat will be positioned over a wing of the aircraft.
To view the demonstration, visit: http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/26/
<div id="seatmap">
<div id="plane">
<table class="rows">
<tr><th>E</th></tr>
<tr><th>D</th></tr>
<tr><th></th></tr>
<tr><th>C</th></tr>
<tr><th>A</th></tr>
</table>
<div id="cabin">
<table>
<tr class="wingRowTop">
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="wingSeat"></td>
<td class="wingSeat"></td>
<td class="wingSeat"></td>
<td class="wingSeat"></td>
<td class="wingSeat"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley"></td>
</tr>
[...]Thank you for any suggestions on how to make the wings more adaptable (scrollable)!! Please note that the dimensions of the plane are not fixed, so a plane may have varying numbers of rows.