How To Force Position Fixed When Parent Container Has A Transformation?
I need to apply position fixed to the viewport of a child div inside a parent which has a transformation applied. Unfortunately I cannot remove the transformation on the parent. A
Solution 1:
The Answer is simple this is not possible with CSS. Visit the following question for details
Positions fixed doesn't work when using -webkit-transform
'transform3d' not working with position: fixed children
But you can achieve your target with js here is a basic example.
$(window).scroll(function() {
$(".transform-fixed").css({
"top": $(window).scrollTop()
});
}).rotate {
transform: rotate(30deg);
background: blue;
width: 300px;
height: 300px;
margin: 0 auto;
}
.fixed {
position: fixed;
background: red;
padding: 10px;
color: white;
top: 50px;
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html><body><divclass="rotate"><divclass="fixed transform-fixed"> I am fixed inside a rotated div.</div></div><divclass="fixed"> I am fixed outside a rotated div.</div></body></html>
Post a Comment for "How To Force Position Fixed When Parent Container Has A Transformation?"