如何不使用position:fixed通过JS实现侧边栏固定及默认收起功能

1. 侧边栏滚动固定性能优化 #

最优方案（推荐）：使用CSS position: sticky 实现，无JS性能开销 #

该属性不会脱离文档流，不会破坏原有布局，也不影响侧边栏展开收起功能，仅需添加如下CSS：

#sidebar-wrapper {
  position: sticky;
  top: 60px; /* 对应你原有逻辑里的顶部内边距 */
  height: calc(100vh - 60px); /* 限制最大高度为视口高度减去顶部边距 */
  overflow-y: auto; /* 侧边栏内容过长时内部可滚动 */
}

添加后可直接删除原有滚动监听修改marginTop的JS代码，性能远高于动态修改样式的JS方案。

兼容场景JS优化方案 #

如果需要兼容不支持sticky的老旧浏览器，可对原有JS做如下优化，降低性能开销：

1. 增加节流逻辑，避免scroll事件高频触发
2. 用transform替代marginTop修改，减少页面重排
   优化后代码：

$(function() {
  var $sidebar   = $("#menu"),
      $window    = $(window),
      offset     = $sidebar.offset(),
      topPadding = 60,
      isTicking = false;

  $window.scroll(function() {
    if (!isTicking) {
      window.requestAnimationFrame(function() {
        var scrollTop = $window.scrollTop();
        $sidebar.css('transform', scrollTop > offset.top 
          ? `translateY(${scrollTop - offset.top + topPadding}px)` 
          : 'translateY(0)'
        );
        isTicking = false;
      });
      isTicking = true;
    }
  });
});

2. 侧边栏默认收起实现 #

仅需修改HTML结构，给外层#wrapper元素默认添加toggled类即可，原有切换逻辑无需修改：

<!-- 修改前 -->
<div id="wrapper">
<!-- 修改后 -->
<div id="wrapper" class="toggled">

如果出现页面加载瞬间侧边栏闪现的问题，可给#wrapper添加初始过渡禁用样式，页面加载完成后再开启：

#wrapper:not(.loaded) {
  transition: none !important;
}

页面加载完成后执行$('#wrapper').addClass('loaded')即可。

内容的提问来源于stack exchange，提问作者Markob15