I have created a unique two-column layout using Bootstrap, utilizing the col-md-6 class. The layout consists of a row with a panel at the top containing a table, a left column panel displaying a list of media items, and a right column panel containing text.
https://i.sstatic.net/sZHa0.png
All these elements are within a container-fluid layout. However, when scrolling down the page, the left column's list can scroll while the right column panel disappears from view.
I want to ensure that the text in the panel-text remains visible under the panel-summary. To achieve this, I applied a fixed position along with a translateY(0px) transform to the row containing the panel:
.row-floating {
position: fixed;
margin-top: 0px;
top: 60px;
transform: translateY(0px);
}
The issue arises when scrolling as the panel-text overrides the panel-summary instead of remaining below it:
https://i.sstatic.net/5eNSz.png
You can find the JSFiddle demonstration here.
To address this problem, I updated the code by adding:
A
webkit-transformto prevent any flickering during vertical scrolling:.row-floating { transform: translateZ(0); -webkit-transform: translateZ(0); }
An offset from the top to keep the panel positioned below the navbar (+44px):
$('.panel-floating').css('position', 'fixed').css('top', 44.0).css('width', actualWidth);