add this
// chrome
position: -webkit-sticky;
// firefox
position: -moz-sticky;
// IE
position: -ms-sticky;
Solution 1 :
Problem :
html {
height: 100%;
}
body {
height: 100%;
background-color: var(--main-bg2-color);
}
.wrapper {
position: relative;
width: 100%;
height: auto;
margin-top: 55.6px !important;
display: grid;
grid-template-columns: 17% 50% 30%;
column-gap: 15px;
}
.left-side {
background-color: var(--main-bg2-color);
color: var(--main-text-color);
height: 100%;
padding-top: 41px;
padding-left: 0;
position: sticky;
top: 55px;
}
.middle-side {
padding-top: 40px;
background-color: var(--main-bg2-color);
color: white;
height: auto;
}
.right-side {
padding-top: 40px;
padding-left: 0;
background-color: var(--main-bg2-color);
height: auto;
position: sticky;
top: 55px;
}<nav>
</nav>
<div class="container">
<div class="wrapper">
<div class="left-side">
</div>
<div class="middle-side">
</div>
<div class="right-side">
</div>
</div>
</div>
</div>
<footer>
</footer>I want the left side class div and right side class div to be sticky and middle content should be scrollable while scrolling down so I have used position sticky to left side class and right side class. But the position sticky is not working.
Comments
Comment posted by cloned
I created a snippet from your code, please add code so we can actually see your problem.
Comment posted by Temani Afif
add
Comment posted by Temani Afif
also it won’t work with left because you made the height:100%
Comment posted by ronak patel
Thanks a lot @TemaniAfif. It worked
Comment posted by Temani Afif
your element is stretched to its parent height so there is no room to have a sticky behavior. See the duplicate to understand how sticky works and how the height of the element is important
Comment posted by cloned
No prefixes necessary for this, all browsers support this without prefixes. Except IE, it doesn’t support it at all, making this just wrong.
Comment posted by ronak patel
I had added it. But still it doesnt work