Jquery to set an element to fixed while scrolling within its parent div and absolute position it to bottom when parent bottom reached.

fixme.js

(function ($) {
  const fixme = $(".fixme");
  // all JS code here

  let fixmeTop = fixme.offset().top; // get initial position of the element
  const parent1 = fixme.parent();
  const parent2 = parent1.parent();
  let fixmebottom =
    parent2.position().top +
    parent2.offset().top +
    parent2.outerHeight(true) -
    (fixme.height() + 64);
  $(window).scroll(function () {
    // assign scroll event listener
    const currentScroll = $(window).scrollTop(); // get current position
    const currentWidth = $(window).width();
    const bottomLimit =
      currentScroll + $(window).height() / 2 + fixme.outerHeight(true);
    if (currentWidth > 798) {
      if (currentScroll >= fixmeTop) {
        if (bottomLimit <= fixmebottom) {
          // within parent2
          fixme.css({
            position: "fixed",
            top: "50%",
          });
        } else {
          // below parent2
          fixme.css({
            position: "absolute",
            top: `calc(100% - ${fixme.height() + 64}px)`,
          });
        }
      } else {
        // apply position: static
        fixme.css({
          // if you scroll above it
          position: "absolute",
          top: 0,
        });
      }
    } else {
      // apply position: aboslute
      fixme.css({
        // if you are on mobile
        position: "relative",
        top: 0,
      });
    }
  });
  $(window).resize(function () {
    fixmeTop = fixme.offset().top; // get initial position of the element
    fixmebottom =
      parent2.position().top +
      parent2.offset().top +
      parent2.outerHeight(true) -
      (fixme.height() + 64);
  });
})(jQuery);