<div class="container">
  <div class="scroll">
    <span class='sticky'>sticky</span>
    <span class='fixed'>fixed</d>
  </div>
</div>
.container {
  background: red;
  width: 300px;
  height: 2000px;
}

.scroll {
  background: blue;
  height: 300px;
}

.sticky {
   position: -webkit-sticky; /* 사파리 브라우저 지원 */
   position: sticky;
   top: 50px;
   padding: 10px;
   background: orange;
}

.fixed {
   position: fixed;
   top: 50px;
   padding: 10px;
   background: green;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.