Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> #sticky { position: sticky; position: -webkit-sticky; background: #e8ebe8; width: 80px; height: 80px; top: 70px; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 5px #000; } .extra, #wrapper { width: 75%; margin: auto; background-color: #9ad996; } #wrapper { height: 800px; } .extra { height: 100px; } body { font-family: georgia; height: 1000px; } @media (min-height: 768px) { #wrapper { height: 2000px; } } </style> </head> <body> <div class="extra"></div> <br /> <div id="wrapper"> <div id="sticky">Sticky box </div> </div> <br /> <div class="extra"></div> </body> </html>