How Sticky Position works in CSS?- Tryit Editor for Web Developers

Edit This Code:
<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>