I have two div's with different background-color. I want the content to stay fixed while scrolling. But when the second div is in the viewport, I want it to be relative to it, so the content wont stay forever.

<div class="grandparent" id="grandparent">
  <div class="parent1" id="parent1">
    <div class="content" id="content"></div>
  </div>
  <div class="parent2" id="parent2"></div>
</div>

so the content should be fixed when scrolling over parent1 and parent2. But when i enter parent2, the content should be relative the parent2 so i can place other content.