Javascript 制作一个没有通过JS应用样式的可滚动侧边栏

。不久前我看到了这个侧边栏，并且能够找到它

当您向下滚动页面时，侧边栏也会滚动并粘在底部。当你向上滚动时，即使你在页面中间的某个地方，侧边栏也会滚动。

这个解决方案相当简单，在侧边栏工作时不应用任何CSS。一些使用初始CSS的魔法，比如全视口高度、粘性定位、隐藏溢出和类似JS的滚动顶

我设法提取了源代码中负责侧边栏的部分，但我不明白它是如何工作的。此功能似乎对此类行为负责：

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)
        })
    }
  )
}

---

有人能解释一下它是如何工作的吗？

请别人帮你破译简化后的代码有点过分——你需要帮助理解其中的某个特定部分吗？@JonWarren我无法理解JS部分，它是如何与这些样式结合在一起工作的。可能是一些简单的滚动高度计算。您提供的代码的问题是它被缩小了，这使代码变得模糊。你有没有可以参考的非精简版本的代码？@JonWarren上面的函数有很多不必要的代码，这是肯定的。我不确定什么东西可以去掉。不幸的是，只有缩小的代码：（只需在网上搜索“css sticky sidebar”，然后从头开始。有很多例子可以找到（我自己刚刚找到了10个）。正如其他评论所提到的，这一个不会很快给你带来快乐。。。

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