CSS
Position Sticky is not working
Need technical help?
Our experts will get back to you within 24 hours.
Introduction
position sticky is the CSS property of position that allows to stick a div while scrolling parent div or section.
Possible Conditions
1) Maybe you write position static instead of sticky.
2) Don't forget to give position places like top, left, right, and bottom, where you want to stick div.
3) If you divide a parent section part into two or more div or sections with flex then do it with inline-block
4) if you use flex then align-self: flex-start; to position sticky div
5) Make sure you didn't give overflow-hidden property inside its parent or scrollable section or div otherwise it will not going to work
Example
<body> <main> <section> <div class="wrapper"> <h1 class="heading">Sticky</h1> <div class="parent"> <div class="box1">i am big scrollable block</div> <div class="box2">I am sticky block</div> </div> </div> </section> </main></body>// CSS file.box1{ display: inline-block; vertical-align: top; width: calc(100% - 404px); height: 2000px; background-color: #c5efff;}.box2{ display: inline-block; vertical-align: top; width: 400px; height:300px; background-color: #c4ffa1; position: sticky; top: 100px; right: 0; align-self: flex-start; /* in case if you give display: flex; to its parent */}
Here if you give overflow-hidden inside body then it will not going to work because here scroll in body so give scroll inner div after overflow-hidden or remove overflow-hidden property
Ready to transform your business with our technology solutions? Contact Us today to Leverage Our CSS Expertise.
CSS
