Position Sticky

by Hugo Vale Pereira

HTML

<div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam saepe autem neque ullam nesciunt molestiae rem earum! Sunt placeat quaerat molestiae deleniti optio labore veniam magnam, corporis saepe est quidem.
  </div>
  <div class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates harum consequatur illo corporis delectus laudantium asperiores, pariatur voluptatibus, ad, voluptatum voluptate ipsam blanditiis nemo quia est placeat et? Impedit, dolor.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates harum consequatur illo corporis delectus laudantium asperiores, pariatur voluptatibus, ad, voluptatum voluptate ipsam blanditiis nemo quia est placeat et? Impedit, dolor.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates harum consequatur illo corporis delectus laudantium asperiores, pariatur voluptatibus, ad, voluptatum voluptate ipsam blanditiis nemo quia est placeat et? Impedit, dolor.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates harum consequatur illo corporis delectus laudantium asperiores, pariatur voluptatibus, ad, voluptatum voluptate ipsam blanditiis nemo quia est placeat et? Impedit, dolor.</div>
  
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates harum consequatur illo corporis delectus laudantium asperiores, pariatur voluptatibus, ad, voluptatum voluptate ipsam blanditiis nemo quia est placeat et? Impedit, dolor.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates harum consequatur illo corporis delectus laudantium asperiores, pariatur voluptatibus, ad, voluptatum voluptate ipsam blanditiis nemo quia est placeat et? Impedit, dolor.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates harum consequatur illo corporis delectus laudantium asperiores, pariatur voluptatibus, ad, voluptatum voluptate ipsam blanditiis nemo quia est placeat...

CSS

.a{
  position: sticky;
  top: 0;
  color: blue;
}

.b{
  color: red;
  position: sticky;
  bottom: 0;
}