Сделайте липкую прокручиваемую боковую панель без применения стилей через JS

Question

Вот как это должно работать . Я видел эту боковую панель некоторое время go и смог найти страницу в веб-архиве .

Когда вы прокручиваете страницу вниз, боковая панель тоже прокручивается и прилипает к нижней части. , При прокрутке вверх, даже если вы находитесь где-то посередине страницы, боковая панель также прокручивается вверх.

Это решение довольно простое и не применяется CSS во время работы боковой панели. Какой-то волшебный c с использованием начальных CSS, таких как полная высота области просмотра, липкое позиционирование, скрытое переполнение и JS, как scrollTop.

Мне удалось вытащить часть исходного кода, которая отвечает за боковой панели, но я не могу понять, как это работает. Кажется, эта функция отвечает за такое поведение:

function(e, t) {
  Air.define(
    'module.sticky_sidebar',
    'lib.DOM, module.DOM, module.metrics, module.propaganda, module.notify, module.smart_ajax',
    function(e, t, n, i, o, r) {
      var a,
        s,
        l,
        c = this,
        u = 0,
        d = !1,
        h = function() {
          var t = s.scrollTop,
            i = Math.round(e.rect(a).top)
          50 === i
            ? (s.scrollTop = t + (n.scroll_top - u))
            : i > 50
            ? (s.scrollTop = 0)
            : i < 50 && (s.scrollTop = 999999),
            (u = n.scroll_top)
        },
        f = function() {
          a && s && e.bem.toggle(a, 'height_auto', !(n.window_height - 50 < s.scrollHeight))
        },
        m = function(t) {
          if (((5 != t && 3 != t) || (l[t] = !1), !1 === l[5] && !1 === l[3])) {
            var n = e.find('.page--entry')
            n && (e.toggleClass(n, 'with--entry_center', !0), c.destroy()), (n = null)
          }
        }
      ;(c.init = function() {
        ;(a = c.elements[0].element),
          (s = e.find(a, '.sticky_sidebar__scroll')),
          (l = {
            5: !0,
            3: !0
          }),
          n.on('Breakpoint changed', function(e) {
            'wide' === e || 'desktop' === e
              ? !1 === d &&
                n.document_height - 20 > n.window_height &&
                (t.on('Window scroll', h), t.on('Window resize', f), f(), (d = !0))
              : !0 === d && (t.off(), (d = !1))
          })
      }),
        (c.refresh = function() {
          c.destroy(), c.init()
        }),
        (c.destroy = function() {
          t.off(), n.off(), i.off(), (u = 0), (a = s = null), (d = !1)
        })
    }
  )
}

И CSS:

.sticky_sidebar {
  top: 50px;
  height: calc(100vh - 50px);
  width: 300px;
  margin-top: -20px;
  position: sticky;
}
.sticky_sidebar__scroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Может кто-нибудь объяснить, как это работает?