滚动时Fixed元素切换为Relative元素出现闪烁问题求助

问题根源分析 #

1. 类名判断语法错误：hasClass('.optBTM')写法错误，hasClass的参数是类名本身，不需要带点号（点号是CSS选择器的语法，不属于类名），错误的判断会导致类的添加/移除逻辑混乱。
2. 依赖动态变化的元素位置做判断：当.fixed元素从fixed切换为relative定位后，它的offset().top会发生突变（fixed定位时相对于视口，relative时相对于文档流），导致滚动事件中判断条件反复触发，类被频繁添加和移除，引发闪烁。
3. 逻辑分支冗余：原代码的else分支会在不符合前两个条件时强制移除类，包括刚切换定位后的状态，进一步加剧了类的切换频率。

修复后的代码实现 #

HTML（无需修改）

<div class="main">
  <div class="inner">
    <div class="maincontent">
      some content
    </div>
    <div class="fixed">
      hola
    </div>
    <div class="last">
      this is the last content.  I want my fixed content to be inline as I scroll past.
    </div>
    <div class="footer">
      Footer Content
    </div>
  </div>
</div>

JavaScript

$(window).on('scroll', function(){
  const $fixed = $('.fixed');
  const $last = $('.last');
  const windowScrollBottom = $(window).scrollTop() + $(window).height();
  const lastElementTop = $last.offset().top;
  const needRelative = windowScrollBottom >= lastElementTop;

  // 仅在状态需要切换时执行DOM操作
  if (needRelative && !$fixed.hasClass('optBTM')) {
    $fixed.addClass('optBTM');
  } else if (!needRelative && $fixed.hasClass('optBTM')) {
    $fixed.removeClass('optBTM');
  }
});

CSS（优化优先级，避免过度使用!important）

.maincontent{
  height: 800px;
  background:#d3d3d4;
}
.fixed{
  position:fixed;
  width:100%;
  height:50px;
  background: #fff;
  bottom:0;
  padding:10px;
  box-shadow:0px -4px 12px 0px #0000000D;
}
.footer{
  background:#555;
  height:150px;
}
/* 提高选择器优先级，替代!important */
.fixed.optBTM{
  background: unset;
  position: relative;
  box-shadow: unset;
  bottom: auto; /* 清除fixed定位的bottom属性，避免影响relative布局 */
}

修复逻辑说明 #

• 使用视口底部位置（滚动距离+视口高度）与.last元素的顶部位置做比较，判断是否需要切换定位，避免依赖.fixed元素的动态位置。
• 仅在状态需要改变时才执行类的添加/移除操作，减少不必要的DOM操作。
• 修正hasClass的参数错误，确保类名判断准确。

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