Aayush Dahal
Reputation: 1182
Unable to set element sticky despite setting position sticky
I have a layout as:
I want this left and right sidebar to be sticky.
Here, is my code:
/** Header Row Starts **/
.fs-header-row {
background: #ffffff;
/* height: 61px; */
box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.05);
display: grid;
}
/** Header Row Ends **/
.main-fs-container {
position: relative;
background-color: lime;
display: grid;
grid-template-columns: 279px auto;
}
/** Left Sidebar Starts **/
.fs-sidebar-left {
width: 279px;
background-color: yellow;
padding: 12px 10px 12px 15px;
backdrop-filter: blur(50px);
position: sticky;
top: 0;
}
/** Left Sidebar Ends **/
/** Main Container Starts **/
.building-table-container {
width: fit-content;
position: relative;
}
.floor-stack-main {
/* margin-left: 289px; */
padding: 14px 14px 100px 30px;
position: relative;
}
.floor-stack-main .building-title {
font-weight: 600;
font-size: 16px;
line-height: 19px;
color: #2b2b2b;
margin-bottom: 10px;
}
/** Main Container Ends **/
/**right column starts**/
.floor-stack-main .unit-detail-right {
position: absolute;
/* top: 61px; */
top: 0;
right: 0;
background-color: red;
}
.floor-stack-main .unit-detail-right .unit-detail-wrapper {
width: 279px;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(50px);
padding: 13px 12px;
}
/** right column ends **/<div class="App">
<div class="fs-header-row">
<p>This is just the replica of a header row</p>
</div>
<div class="main-fs-container">
<aside class="fs-sidebar-left">
<div class="ks-first-row d-flex justify-content-between align-items-center">
<h2 class="sidebar-title mb-0">Left SIdebar needs to be stikcy</h2>
</div>
<div class="ks-second-row toggle-button-groups">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptatem cumque excepturi earum velit id laudantium quod, temporibus minima maiores quam officiis quia numquam. Voluptatem ad minima tempore consequuntur a.</p>
</div>
</aside>
<div class="floor-stack-main">
<div class="buildings-column">
<div class="building-table-container">
<h5 class="building-title">Building 1</h5>
<div class="ks-building-wrapper">
<table class="table">
<tbody>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>Dummy1</th>
<th>Dummy2</th>
<th>Dummy3</th>
<th>Dummy4</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="building-table-container">
<h5 class="building-title">Building 1</h5>
<div class="ks-building-wrapper">
<table class="table">
<tbody>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>Dummy1</th>
<th>Dummy2</th>
<th>Dummy3</th>
<th>Dummy4</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Germany</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="unit-detail-right">
<div class="unit-detail-wrapper">
<h2>Right Sidebar,</h2>
<h4>this needs to be sticky</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto non possimus veniam laudantium molestiae numquam, quas facilis totam impedit, adipisci quibusdam perferendis beatae explicabo, quasi reprehenderit unde labore debitis eveniet?</p>
</div>
</div>
</div>
</div>
</div>Here is the jsfiddle link.
On this one, right sidebar needs to be sticky, in more like a fixed or absolute way. For example, the table on the green background can extended upto right even on that case right sidebar needs to be above this green div and still needs to be sticky.
How could I make these two sidebars sticky?
Upvotes: 2
Views: 55
Answers (1)
lawrence_monk
Reputation: 393
The issue is in how the HTML structure is presented.
Sticky content has to:
- Be able to identify the height of its parent.
- That parent should be larger than the content (so that there is room for it to move).
- There should be no overflow properties.
- A position of
tophas to be given a value.
Your left sidebar has position: sticky on the wrong element. Instead of .fs-sidebar-left { position: sticky }, you should have it on the child element(s) .ks-first-row / .ks-second-row; if you want both to be contained together, wrap them with a div and put the position sticky on that instead.
Your right sidebar is using position: absolute, so this isn't set to be sticky.
Here's a quick example you can use to layout your content to allow position sticky to work.
Here's a working example on CodePen
Upvotes: 1
Related Questions
- Why is my position:sticky not working?
- Sticky position not works as expected. works as buggy
- 'Position: sticky' not sticking
- position sticky property not working in html
- Why CSS position: sticky isn't applied?
- Position: sticky; not working no matter what
- Position: Sticky Element not being Sticky In Example
- Sticky position not 'pushing' other sticky elements
- position sticky not working
- Sticky position not working on div element