Issue
I've noticed that centrally aligning (vertically) an element with position sticky starts to break down after a certain reduction of screen width, depending on that elements width. Unlike position: fixed, the sticky element eventually gets stuck and loses its central alignment.
Any idea why this is happening and a workaround?
div {
height: 100px;
width: 500px;
background-color: red;
position: sticky;
left: 50%;
transform: translateX(-50%);
}<div>
</div>Solution
You can do it with using flex on parent class and using justify-content
Example: https://jsfiddle.net/9cp6borj/
<body>
<div class="div__item">
<div class="div__sticky">
</div>
</div>
</body>
<style>
.div__item {
display:flex;
justify-content:center;
}
.div__sticky {
height: 100px;
width: 500px;
background-color: red;
position: -webkit-sticky;
position: sticky;
top: 20px;
}
</style>
Answered By - Jure Vidmar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.