not sufficiently tested

scrollfix-at-bottom.js

import _ from "underscore";

export default function scrollfixAtBottom(opts) {
  opts = _.assign({
    elFixed: document.querySelector(".js-scrollfix-bottom"),
    elRelative: document.querySelector(".js-scrollfix-bottom-rel"),
    bottom: 10,
    throttle: 50,
    debug: false
  }, opts);

  if (!opts.elFixed || !opts.elRelative) {
    return;
  }

  if (opts.debug) {
    opts.elFixed.style.backgroundColor = "red";
    opts.elRelative.style.backgroundColor = "red";
  }

  const STATE_SCROLL              = 1;
  const STATE_FIXED_AT_BOTTOM     = 2;
  const STATE_BOTTOM_OF_CONTAINER = 3;

  let state;
  function setState(newState) {
    if (state === newState) {
      return;
    }
    state = newState;
    switch (state) {
      case STATE_SCROLL: {
        _.assign(opts.elFixed.style, {
          position: "static",
          bottom: null
        });
        break;
      }
      case STATE_FIXED_AT_BOTTOM: {
        _.assign(opts.elFixed.style, {
          position: "fixed",
          bottom: `${opts.bottom}px`
        });
        break;
      }
      case STATE_BOTTOM_OF_CONTAINER: {
        _.assign(opts.elFixed.style, {
          position: "absolute",
          bottom: `${opts.bottom}px`
        });
        break;
      }
    }
  }

  const t1 = window.pageYOffset + opts.elFixed.getBoundingClientRect().top;
  const t2 = window.pageYOffset + opts.elRelative.getBoundingClientRect().top;

  window.addEventListener("scroll", _.throttle(() => {
    const y1 = t1 + opts.elFixed.clientHeight + opts.bottom - window.innerHeight;
    const y2 = t2 + opts.elRelative.clientHeight - window.innerHeight;
    if (y1 >= y2) {
      return setState(STATE_SCROLL);
    }
    if (window.pageYOffset > y2) {
      setState(STATE_BOTTOM_OF_CONTAINER);
    } else if (window.pageYOffset > y1) {
      setState(STATE_FIXED_AT_BOTTOM);
    } else {
      setState(STATE_SCROLL);
    }
  }, opts.throttle));
}