JavaScript基于onscroll实现粘性元素时如何避免元素跳动

你观察到的带3个黄色按钮的条块滚动时的跳动问题，和模板隐藏的未知CSS类无关，核心是现有固定逻辑本身的布局占位缺失导致的：

• 按钮块原本在正常文档流中使用position: relative定位，当触发滚动逻辑将其切换为position: fixed时，元素会脱离正常文档流，原本它占据的垂直高度会瞬间被后续页面内容回填，整页内容突然上移一截，直接产生了临界位置的跳动感
• 初始计算的fixmeTop是按钮块未脱离文档流时的位置，一旦元素切为fixed引发页面布局偏移，实际滚动距离和预设的判断阈值会出现错位，进一步放大跳动的感知

1. 用等高占位元素补全布局空间
   只要在按钮块切换为固定状态的同时，在它原本的文档流位置插入一个和按钮块等高的透明占位元素，保留原本的垂直空间，就不会出现页面突然“塌一块”的问题。另外需要给固定状态的按钮块补上left属性和100%宽度，不然切为fixed后元素会从原有的满宽形态收缩为内容宽度，视觉错位会更明显。
   可直接替换现有逻辑的代码如下：

   // 缓存DOM节点、位置、高度，减少滚动事件触发时的重复计算
   const $pulsanti = $('.pulsanti');
   const fixmeTop = $pulsanti.offset().top;
   const pulsantiHeight = $pulsanti.outerHeight();
   // 初始化占位元素，高度和按钮块完全一致
   const $placeholder = $('<div class="pulsanti-holder"></div>')
       .css('height', pulsantiHeight)
       .hide()
       .insertAfter($pulsanti);
   
   $(window).scroll(function() {
       const currentScroll = $(window).scrollTop();
       if (currentScroll >= fixmeTop) {
           $pulsanti.css({
               position: 'fixed',
               top: '0',
               left: '0',
               width: '100%',
               zIndex: '1020'
           });
           $placeholder.show();
       } else {
           $pulsanti.css({
               position: 'relative'
           });
           $placeholder.hide();
       }
   });
   

2. 额外避坑提示
   • 计算按钮块初始位置的代码，一定要放在页面所有图片、懒加载资源加载完成后执行，不然这些资源加载会撑高页面，导致初始位置计算不准，同样会引发跳动
   • 上述代码完全兼容现有jQuery环境，不需要额外引入第三方滚动固定插件

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