sticky-inside-transform-1-ref.html (576B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8" /> 4 <style> 5 html, body { margin: 0 } 6 7 #scroll { 8 overflow-y: auto; 9 scrollbar-width: none; 10 height: 100vh; 11 background: green; 12 } 13 #transform { 14 transform: translateX(100%) rotate(90deg); 15 height: 600px; 16 position: relative; 17 top: -300px; 18 transform-origin: 0% 0%; 19 background: #ff0; 20 } 21 #sticky { 22 position: relative; 23 top: 300px; 24 background: #0ff; 25 height: 100px; 26 } 27 </style> 28 <div id="scroll"> 29 <div id="transform"> 30 <div id="sticky"></div> 31 </div> 32 <div id="content" style="height: 2000px;"></div> 33 </div> 34 </html>