How Sticky Position works in CSS?- Tryit Editor for Web Developers
Edit This Code:
See Result »
<html> <head> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: lightpink; border: 4px solid red; } </style> </head> <body> <h1>Position: sticky</h1> <p><b>"Try to scroll" inside this frame to understand how sticky positioning works"...</b></p> <div class="sticky">Sticky</div> <div style="padding-bottom:3000px"> <p>Scroll back up to remove the stickyness.</p> <p>Some text to enable scrolling.. For Example: The Central Superior Services (denoted as CSS; or Bureaucracy) is a permanent elite bureaucratic authority, and the civil service that is responsible for running the civilian bureaucratic operations and government secretariats and directorates of the Cabinet of Pakistan...</p> <img src="logo.jpg"/> </div> </body> </html>
Result: