Fix container inside another container on window scroll using pure javascript

Question

I have a container thisSticks that I have to fix in another container stickInContainer on scroll. Basically, replicate CSS sticky behaviour. I could have just used sticky, but it doesn't work in all browsers. So I am making it in pure javascript.

Current Behaviour: In the demo below, grey container should never overlap with blue footer container, but it does.

Expected Behaviour: When the bottom of thisSticks hits top of footer, it should stay there and when user scrolls back up and reaches top of thisSticks, it should stick back to top of stickInContainer till it reaches its initial position.

I can think of incrementing stickyDiv.style.bottom on every scroll after thisSticks bottom hits top of footer.

How will this work, Is there another approach?

window.onscroll = function() {
  myFunction();
}

const stickyDiv = document.getElementById('thisSticks');

const stickyDivHeight = stickyDiv.offsetTop;

function myFunction() {
  if (window.pageYOffset > stickyDivHeight) {
    stickyDiv.style.position = 'fixed';
    stickyDiv.style.top = 0;
  } else {
    stickyDiv.style.position = 'initial';
  }
}

#topSection {
  height: 100px;
}

#stickInContainer {
  height: 800px;
}

#thisSticks {
  width: 100%;
  height: 40px;
  opacity: 0.7;
  background-color: grey;
}

#footer {
  width: 100%;
  background-color: blue;
  height: 500px;
}

<div id='topSection'>Top Section</div>
<div id='stickInContainer'>
  <div id='thisSticks'></div>
</div>
<div id='footer' />

Answer 1

You can add another condition to test when the footer reach the top minus the height of the sticky element. If it's the case you change the top differently:

window.onscroll = function() {
  myFunction();
}

const stickyDiv = document.getElementById('thisSticks');
const footer = document.getElementById('footer');

const stickyDivHeight = stickyDiv.offsetTop;
const Height = stickyDiv.clientHeight; /*height of the sticky element*/

const footerHeight = footer.offsetTop; /*footer offset*/

function myFunction() {
  if (window.pageYOffset > stickyDivHeight ) {
    stickyDiv.style.position = 'fixed';
    stickyDiv.style.top = 0;
  } else {
    stickyDiv.style.position = 'initial';
  }
  
  /*Here the sticky will touch the footer and top will be negative*/
  if(window.pageYOffset>(footerHeight - Height)) {
    stickyDiv.style.top = (footerHeight - Height)-window.pageYOffset + "px";
  }
}

#topSection {
  height: 100px;
}

#stickInContainer {
  height: 800px;
}

#thisSticks {
  left:0;
  right:0;
  height: 40px;
  opacity: 0.7;
  background-color: grey;
}

#footer {
  background-color: blue;
  height: 500px;
}
body {
 margin:0;
}

<div id='topSection'>Top Section</div>
<div id='stickInContainer'>
  <div id='thisSticks'></div>
</div>
<div id='footer' ></div>