.container {
  height: 200px;
  overflow-y: scroll;
  width: 350px;
}

.title {
  background-color: red;
  height: 100px;
  margin-bottom: 1.5em;
  color: white;
  text-align: center;
}

.sticky {
  position: sticky;
  background-color: blue;
  height: 50px;
  color: white;
  text-align: center;
  top: 0;
}

.hover {
  transition: .15s;
  background-color: green;
  box-shadow: 0px 4px 4px rgba(0,0,0,.38);
}

.body {
  height: 600px;
}

const select = document.querySelector('.title');
const observer = new window.IntersectionObserver( (entry) => {
  if (!entry[0].isIntersecting) {
    document.querySelector('.sticky').classList.add('hover');
  } else {
    document.querySelector('.sticky').classList.remove('hover');
  }
});
observer.observe(select);