Anchoring elements to both the top and bottom after they scroll off screen using pure CSS

I have a container that scrolls up and down vertically. Within the container there are some absolutely positioned items. Here is an example to illustrate.

#body {
  height: 200px;
  overflow: scroll;
  font-family: sans-serif;
  font-size: 40px;
}

#container {
  width: 100%;
  height: 600px;
  background-color: rgba(255, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: start;
  justify-content: center;
}

#item {
  display: inline;
  background-color: rgba(0, 0, 255, 0.1);
  padding: 10px 20px;
  border-radius: 5px;
  position: absolute;
  top: 150px;
}

<div id="body">
  <div id="container">
    <div id="item">
      Hello
    </div>
  </div>
</div>

I want to make sure a little portion of the item is always visible as the user scrolls up and down, so that the user can always see something there, and doesn't lose track of it. When the user scrolls too far down, it should look like this...

Conversely, if the user scrolls too far up, it should look like this...

It's also important that the element can be positioned anywhere in the container.

Is this possible with pure CSS? If this is not possible, what's the most efficient approach to achieving the same result with pure CSS & JS (bearing in mind the container might have multiple items in it)?

from Anchoring elements to both the top and bottom after they scroll off screen using pure CSS